css制作复杂表格
CSS 制作复杂表格的方法
使用 border-collapse 和 border-spacing 控制边框样式
通过设置 border-collapse: collapse 可以让表格边框合并为单一线条，避免双边框问题。border-spacing 可以调整单元格之间的间距，适用于 border-collapse: separate 时。
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}合并单元格实现复杂布局
使用 colspan 和 rowspan 属性在 HTML 中合并单元格，再通过 CSS 精细化控制样式。例如跨多列的标题栏：
<table>
<tr>
<th colspan="2">合并的标题</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>斑马纹效果增强可读性
通过 nth-child 伪类为交替行添加背景色：
tr:nth-child(even) {
background-color: #f2f2f2;
}固定表头与滚动区域
结合 display: block 和 overflow 实现可滚动表格体：
thead, tbody {
display: block;
}
tbody {
height: 150px;
overflow-y: auto;
}响应式表格设计 针对小屏幕设备，可以通过转换表格为块级元素实现堆叠布局：
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
}高级样式技巧
- 使用
box-shadow添加深度效果 - 通过
position: sticky实现固定表头 - 利用 CSS 变量统一颜色和间距
- 渐变背景增强视觉层次
注意事项
- 合并单元格时需确保 HTML 结构正确
- 固定表头需要计算滚动容器的尺寸
- 响应式设计需测试多种设备
- 复杂表格建议配合 JavaScript 增强交互性
