css固定表头、行头样式代码

要实现CSS固定表头、行头样式，一般采用CSS中的position属性。下面是完整攻略：

样式代码

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
thead, tbody, tr, td, th { 
    display: block;
}
tr:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}
thead th {
    /* 固定表头样式 */
    height: 30px;
}
tbody {
    height: 400px; /* 限制tbody高度 */
    overflow-y: auto; /* 上下滚动条 */
}
tbody td, thead th {
    width: 200px; /* 单元格宽度 */
    float: left;
}
tbody tr:nth-child(even) {
    background: #e9e9e9; /* 列表隔行变色 */
}

实现思路

1. 将表头中的thead和其它table元素分别设置为display:block，使它们变为块级元素，从而使单元格(td/th)呈窄矩形堆叠在一起，前提是单元格必须先设置为块级元素。因为块级元素只从新行开始，并占据一定宽度，使每一个单元格都单独占据一行。

2. 设置tr:after元素清除浮动，由于块级元素的特性，这样单元格的位置在一行中沿着块级元素交替出现，避免了在单元格过宽时出现不好看的堆积现象。

3. 设置tbody的高度以及overflow-y属性为auto，使其出现垂直滚动条，这样在列表过长时可以通过滚动条来查看。

4. 固定表头用的是thead th，这样在普通的表格中只会有tbody出现滚动，表头部分会固定在列表上面。同时需要设置表头高度，否则即使固定了表头，也会出现浮动元素的异常。

示例说明

以下是两个示例：

示例1

姓名	性别	年龄	城市
张三	男	25	北京
李四	女	30	上海
王五	男	28	深圳
赵六	女	33	广州

对应的CSS代码为：

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #ddd;
}

thead th {
  height: 50px;
  text-align: center;
}

thead, tbody {
  display: block;
}

tbody {
  height: 300px;
  overflow-y: auto;
}

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

tr:before {
  content: ' ';
  display: block;
  visibility: hidden;
  height: 50px;
}

td {
  text-align: center;
  width:100px;
  height: 25px;
  display: inline-block;
  border:1px solid #999;
}

示例2

另一个示例，下面是一张带有行头的表格，其中第一列固定不动，而第一行和第一列同时固定。

	A	B	C	D
1	$160	$160	$160	$160
2	$160	$160	$160	$160
3	$160	$160	$160	$160
4	$160	$160	$160	$160
5	$160	$160	$160	$160

对应的CSS代码为：

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tbody {
  height: 300px;
  overflow-y: auto;
  width: 100%;
}

thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  background-color: #f2f2f2;
}

thead tr:first-child > th:first-child {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}

th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #f2f2f2;
}

总之，以上是两个示例，可以改变表格（包含列头和行头）的固定位置，适应不同屏幕大小，呈现更好的用户体验。