css样式制作表格

基础表格结构

使用HTML的<table>标签创建表格框架，搭配<tr>（行）、<th>（表头）、<td>（单元格）标签构建内容。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

边框样式

通过border属性设置表格边框，合并边框使用border-collapse: collapse。

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

间距与内边距

使用padding控制单元格内容与边框的间距，border-spacing调整单元格间距（需border-collapse: separate）。

td {
  padding: 12px;
}
table {
  border-spacing: 10px;
}

背景与颜色

通过background-color设置背景色，color定义文字颜色。

th {
  background-color: #f2f2f2;
  color: #333;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

对齐方式

text-align控制水平对齐，vertical-align调整垂直对齐。

th {
  text-align: left;
}
td {
  vertical-align: middle;
}

响应式表格

添加横向滚动条适应小屏幕。

div.table-container {
  overflow-x: auto;
}

悬停效果

使用:hover伪类实现行高亮。

tr:hover {
  background-color: #e6e6e6;
}

斑马线效果

:nth-child()实现交替行颜色。

tr:nth-child(odd) {
  background-color: #fff;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}