css表格的制作方法

使用HTML和CSS创建基础表格

HTML的<table>标签用于创建表格结构，结合CSS可以控制样式。以下是一个基础示例：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

响应式表格设计

对于移动设备，可以通过媒体查询实现横向滚动：

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

斑马条纹效果

通过CSS的:nth-child()选择器实现交替行颜色：

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

表格悬停效果

增加行悬停高亮提升交互体验：

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

固定表头实现

当表格内容较长时，固定表头方便浏览：

thead {
  position: sticky;
  top: 0;
}

边框样式控制

调整边框样式实现不同视觉效果：

table {
  border: 2px solid #333;
  border-radius: 5px;
}
td {
  border-bottom: 1px dashed #ccc;
}

单元格合并技术

通过HTML属性实现跨行跨列：

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