CSS技巧：轻松固定HTML表格表头和首列
在网页设计中，当表格内容较多需要滚动时，保持表头和首列可见非常重要。本文介绍几种CSS方法，实现HTML表格表头和首列的固定效果。
方法一：巧妙运用多个表格
这是最简单直接的方法。将表格拆分成两个：一个表格包含表头，另一个包含数据部分（包括首列）。通过CSS控制这两个表格的定位和尺寸，实现固定效果。
立即学习“前端免费学习笔记（深入）”；
方法二：利用colgroup元素
colgroup元素用于定义表格列组。我们可以利用它为首列设置固定宽度，配合CSS，达到首列固定的效果。 需要注意的是，这种方法主要针对首列固定，表头通常需要结合其他方法一起实现。
方法三：使用其他元素模拟表格
对于结构复杂的表格，可以考虑使用 示例代码 (方法一) 以下代码演示如何使用两个表格和CSS实现表头和首列固定： 对应的CSS代码： 请注意， 通过以上方法，您可以根据实际情况选择最合适的方案，轻松实现HTML表格表头和首列的固定效果，提升用户体验。等元素模拟表格结构，并通过CSS精确控制其布局和定位，从而实现表头和首列的固定效果。这种方法需要更精细的CSS控制，但灵活性更高。
姓名
电话
邮箱
地址
邮编
张三
123456789
123@example.com
北京
100000
李四
987654321
456@example.com
上海
200000
table:first-of-type {
position: relative; /* 确保子元素定位正确 */
}
table:first-of-type thead {
position: sticky; /* 使用sticky定位，比fixed更灵活 */
top: 0;
z-index: 1; /* 确保在数据表格之上 */
}
table:last-of-type {
overflow-y: auto; /* 添加滚动条 */
}
table:last-of-type tbody tr:first-child td:first-child {
position: sticky;
left: 0;
z-index: 1;
}
position: sticky 提供了比 position: fixed 更灵活的固定方式，它会在元素滚动到视窗特定位置时才固定。
