用css实现thead随着滑动条滚动的table

2024年5月31日 239次阅读 来源: zhenbling
时间用户名称品类型号数量
11111111111111多复制几行可以看出效果
table {
  width: 100%;
  height: 300px;   
  thead {
   //thead留出滚动条宽度，以便和tbody对齐
    width: calc( 100% - 1em );      
    height: 50px;
    line-height: 50px;
    display:table;
    width:100%;
    table-layout:fixed;
    th {
      text-align: center;   
    }
  }
  tbody {
    overflow-y: scroll;
    /*thead的display默认属性是：table-header-group,
     *设置为block后才能出现滚动条*/         
    display: block;        
    height: 300px;
    tr {
      height: 50px;
      line-height: 50px;
      /*因为thead的display默认属性是：table-header-group，
       *跟tbody的table-row-group是配套使用的。现在你把他们其中一个改了，
       *自然就不再对齐了。
       *所以以下两步是非常关键的*/
      display:table;
      table-layout:fixed;
      width:100%;          
      text-align: center;          
    }
  }
}
//样式用的是sass语法
    原文作者：zhenbling
    原文地址: https://segmentfault.com/a/1190000012587004
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞