css表格的制作方法

基础表格结构

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

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

添加表头

通过<th>标签实现表头，默认加粗居中：

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

合并单元格

使用colspan横向合并，rowspan纵向合并：

<tr>
  <td colspan="2">跨两列的单元格</td>
</tr>
<tr>
  <td rowspan="2">跨两行的单元格</td>
</tr>

CSS样式控制

通过CSS调整边框、间距等样式：

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

响应式表格

添加滚动条适应小屏幕：

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: #e6e6e6;
}

固定表头

滚动时保持表头可见：

thead {
  position: sticky;
  top: 0;
  z-index: 10;
}