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

fjcgreat 发布于2019-08-29 14:05 / 1082人阅读

摘要：时间用户名称品类型号数量多复制几行可以看出效果留出滚动条宽度，以便和对齐的默认属性是设置为后才能出现滚动条因为的默认属性是，跟的是配套使用的。现在你把他们其中一个改了，自然就不再对齐了。所以以下两步是非常关键的样式用的是语法

时间	用户名称	品类	型号	数量
1111	1111	111	111	多复制几行可以看出效果

</>复制代码 
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语法

云服务器 GPU云服务器 js 屏蔽滚动条滑动 css滚动条滚动条css html 滚动条 css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112914.html

我是如何做固定头部(thead)的

摘要：我希望就用一个，尽可能的减少辅助节点，把这个事情搞定模拟我们尝试给加上，再指定，然后这个就脱离的文档流，固定在页面顶部显示了，还好，所有支持的浏览器都表现一致，就连也生效了。但是，使用或后，原本所占的高度就没有了，因为脱离了文档流。在前端开发中经常遇到需要页面滚动时，固定某个区域显示，常见表格的需求，因为表格有很多列，如果列名不固定在顶部显示，滚动到底部时，可能就不知道某些列对应的是...

crossea 2019-08-20 14:50 评论0 收藏0
vue移动端复杂表格表头，固定表头与固定第一列

摘要：固定的表格头部与第一列的宽高行高都是通过获取真实的表格的宽高来设定的。通过展示的表格的上下滚动从而带动固定在第一列的向上滚动，向左右滚动带动覆盖上表头的的左右滚动。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上...

sarva 2019-08-23 10:26 评论0 收藏0
[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0
教你实现首行及首列固定 Table

摘要：但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。将的剥离进行整体置为覆盖于之上，并将除首列单元格外的其它元素置为透明。先秀一下 demo！此款 Table 源码~ 表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。 Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散...

scq000 2019-08-30 13:57 评论0 收藏0