css 表格制作

基础表格结构

使用<table>标签创建表格框架，<tr>定义行，<td>定义单元格。示例代码：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

表格边框样式

通过border-collapse控制边框合并，border属性设置边框样式：

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

表头与内容区分

使用<th>标签定义表头，配合CSS突出显示：

th {
  background-color: #f2f2f2;
  text-align: left;
}

响应式表格设计

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

div.table-container {
  overflow-x: auto;
}
@media screen and (max-width: 600px) {
  table { display: block; }
}

斑马纹效果

使用:nth-child()伪类实现交替行颜色：

tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #eaeaea;
}

单元格对齐控制

通过text-align和vertical-align调整内容位置：

td {
  text-align: center;
  vertical-align: middle;
}

合并单元格

使用colspan和rowspan属性：

<td colspan="2">跨两列</td>
<td rowspan="3">跨三行</td>

高级样式示例

创建带有阴影和圆角的现代表格：

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  border-radius: 6px;
}
th:first-child {
  border-top-left-radius: 6px;
}
th:last-child {
  border-top-right-radius: 6px;
}