欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML / CSS技巧 可滚动的 tbody

发布时间:2017-12-07  编辑:杨雨个人博客网站   点击:   

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

HTML / CSS技巧 可滚动的 tbody

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

HTML / CSS技巧 可滚动的 tbody

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

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

为了使其工作,

第一步是:设置 tbody 为 display:block ,以便我们可以应用 height 和 overflow 属性。

下一步将是:设置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

本文地址:http://itbyc.com/web/html5/18612.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1