css 表格制作表格

基本表格结构

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

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

边框样式

通过border-collapse合并边框，border属性设置线条：

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

表头突出

用<th>标签定义表头，配合背景色和文字样式：

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

斑马纹效果

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

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

悬停高亮

增加交互效果突出当前行：

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

响应式表格

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

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

固定表头

结合position: sticky实现滚动时表头固定：

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

单元格合并

使用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;
  overflow: hidden;
}