css表格制作

基础表格结构

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

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

边框样式

通过border属性设置边框，配合border-collapse合并边框间隙：

table {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  border: 1px solid #ddd;
}

宽度与对齐

控制表格宽度和内容对齐方式：

table {
  width: 100%; /* 或固定宽度如500px */
}
td {
  text-align: center; /* left/right/center */
  vertical-align: middle; /* top/bottom */
}

隔行变色

使用:nth-child()实现斑马纹效果：

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

表头样式

用<th>标签定义表头并单独设置样式：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
</table>

th {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
}

响应式表格

添加水平滚动条适应小屏幕：

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

悬停效果

为行添加鼠标悬停高亮：

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

合并单元格

通过colspan和rowspan属性实现：

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