css 表格制作

基础表格结构

使用HTML的<table>标签创建表格框架，<tr>定义行，<td>定义单元格，<th>定义表头单元格。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

边框样式

通过border属性设置表格边框，border-collapse合并相邻边框避免双线。

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

单元格间距与内边距

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

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

表格宽度与对齐

width设置表格宽度，text-align控制内容水平对齐，vertical-align控制垂直对齐。

table {
  width: 100%;
}
th {
  text-align: left;
}
td {
  vertical-align: middle;
}

斑马纹效果

使用:nth-child()伪类为交替行设置背景色。

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

响应式表格

通过overflow-x: auto在小屏幕设备上启用横向滚动。

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

高级样式示例

结合阴影、悬停效果等增强视觉表现。

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
tr:hover {
  background-color: #e6f7ff;
}