您的位置:首页 » 分类: HTML+CSS & HTML5+CSS3 » 文章: HTML / CSS技巧 – 可滚动的 tbody

HTML / CSS技巧 – 可滚动的 tbody

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。看下面图示你就明白了:

默认情况下,overflow 属性不适用于表格分组元素 thead, tbody , tfoot。你可以在下面的示例中看到:

See the Pen HTML Table – Exp 1 by vembarrajan (@vemba) on CodePen.0

为了使其工作,

第一步是:设置 tbodydisplay:block ,以便我们可以应用 heightoverflow 属性。

下一步将是:设置thead 中的 tr元素设置为 display:block

所以最终的CSS会是:

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
}

完整示例:

See the Pen HTML Table by vembarrajan (@vemba) on CodePen.0

这样,创建表格非常简单而且富有语义,并且没有依赖 JavaScript 。

如果你有任何改进建议或发现任何问题,欢迎在评论中拍砖斧正。

文章内容来自:https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

3 条评论 - 关于 “HTML / CSS技巧 – 可滚动的 tbody

  1. 表头和单元格会错位
    可调整单元格宽度,表格宽度
    使表格宽度>所有单元格宽度+滚动条宽度

发表评论

电子邮件地址不会被公开。 必填项已用*标注