css表格-纯CSS修复Table表格的第一行（表头）、最后一行和第一列

关于table表格中固定行列的例子，上面已经介绍了一些。

本文要介绍的例子更进一步，要求同时固定Table表格的第一行（表头）、最后一行和第一列。

疗效如图

演示下载

实例介绍

这个例子是一个纯CSS实现，可以水平和垂直滚动表格。 水平滚动时，表格第一列固定； 垂直滚动时，表格的第一行和最后一行是固定的。

HTML代码

HTML代码结构比较简单，可以分为三部分来理解。

代码如下所示：

  
    
      
      
      
      
      
      
    
  
  
    
      
      
      
      
      
      
    
  
  
    
      
      
      
      
      
      
    
    
      
      
      
      
      
      
    
  
name
#
position
games
goals
assists
name
#
position
games
goals
assists
morgan brian
6
midfielder
83
6
11
abby dahlkemper
7
defender
47
0
3

CSS代码

table {
  border-collapse: collapse; 
  font-family: helvetica;
  caption-side: top;
  text-transform: capitalize;
}

td, th {
  border:  1px solid;
  padding: 10px;
  min-width: 200px;
  background: white;
  box-sizing: border-box;
  text-align: left;
}

th {
  box-shadow: 0 0 0 1px black;
}

thead th, 
tfoot th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

thead th:first-child,
tfoot th:first-child {
  left: 0;
  z-index: 3;
}

tfoot {
  position: -webkit-sticky;
  bottom: 0;
  z-index: 2;
}

tfoot th {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: hsl(20, 50%, 70%);
}

tfoot td:first-child {
  z-index: 3;
}

tbody {
  overflow: scroll;
  height: 200px;
}

tr > :first-child {
  position: -webkit-sticky;
  position: sticky; 
  background: hsl(180, 50%, 70%);
  left: 0; 
}

固定表格行（列）的关键代码是position:sticky； 该属性声明该位置是粘性的，即固定的。

在代码中我们看到theadth和tfootth都有这个属性声明css表格，thead是第一行，tfoot是最后一行。

tr>:first-child 是第一列，它还声明了position:sticky; 属性。

tbody为表格内容行，定义了高度为200px：height:200px;，同时声明了overflow:scroll; 属性css表格，表示溢出内容滚动。

总结

本文介绍如何使用纯CSS固定Table表格的第一行（表头）、最后一行、第一列。 代码比较简单易懂，主要是利用了CSS的sticky属性position:sticky;。

您可能还对以下文章感兴趣

相关文章

示例图：

虽然有很多方法可以达到这样的疗效，但我个人认为使用CSS绘制表格更简单、更清晰，效果也不错！ （随意写的，还准备了自己写的demo供以后使用）

CSS代码：

这里css 表格css 表格，灵活使用css中的选择器就非常重要了，也是省事的基本操作。 建议不使用或者平时不喜欢使用的人（可能大多数人在设置布局样式的时候都喜欢使用class）可以稍微使用一下。 看一看！

        .table_box {
            width: 60%;
            height: 500px;
            margin: 0 auto;
        }
        table {
            border: 1px solid pink;
            border-radius: 10px;
            border-spacing: 1;
            box-shadow: 2px 2px 2px #ccc;
            border-spacing: 0;
            width: 100%;
        }
        table tr {
            text-align: center;
        }
        table td,
        table th {
            border-right: 1px solid pink;
            /*设置表格单元格外边框，只设置右下边框*/
            border-bottom: 1px solid pink;
            padding: 10px;
            /*设置单元格内边距，单元格内容显得不拥挤*/
            text-align: center;
        }
        tr:last-child td:first-child {
            border-radius: 0 0 0 10px; 
        }
        tr:last-child td:last-child {
            border-radius: 0 0 10px 0; 
        }
        tr:last-child td { 
            border-bottom: none;
        }
        tr td:last-child,tr th:last-child {
            border-right: none;
        }
        tr:nth-child(even) {
            background: lightcoral;
        }
    

html代码：

    

        

            

                
序号
                
姓名
                
性别
                
年龄
            
            

                
1
                
1
                
1
                
1
            
            

                
2
                
2
                
2
                
2
            
            

                
3
                
3
                
3
                
3
            
            

                
4
                
4
                
4
                
4
            
            

                
5
                
5
                
5
                
5
            
        
    

日程：

供以后使用（参考：w3c 指南）！ ！ ！