css 制作表格

基础表格结构

使用HTML的<table>标签创建表格框架，搭配<tr>（行）、<th>（表头）和<td>（单元格）标签。例如：

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

边框样式

通过border属性添加边框，合并边框间隙使用border-collapse：

table {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 8px;
}

宽度与对齐

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

table {
  width: 100%; /* 或固定宽度如500px */
}
th {
  text-align: left; /* 左对齐 */
}
td {
  text-align: center; /* 居中对齐 */
}

斑马纹效果

使用:nth-child(even)实现交替行背景色：

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

悬停高亮

为行添加悬停效果：

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

响应式设计

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

div.container {
  overflow-x: auto;
}

复杂样式示例

合并单元格与自定义样式：

<table>
  <tr>
    <th colspan="2">合并标题</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>内容</td>
  </tr>
</table>