当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:
html代码:
标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四 标题标题标题标题标题标题标题标题标题五 标题标题标题标题标题标题标题标题标题六
信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 信息一 信息二 信息三 信息信息信息信息信息信息信息信息信息四 信息信息信息信息信息信息信息信息信息五 信息信息信息信息信息信息信息信息信息六 css样式:
.table_box_big { overflow-x: scroll; overflow-y: hidden; position: relative; height: 350px; } .table_box { overflow: hidden; position: absolute; } .table_tbody_box { height: 300px; overflow: scroll; } table { border: 1px solid #eeeeee; } table thead tr th { width: 80px; height: 50px; border-right: 1px solid #eeeeee; text-align: center; word-break: keep-all; padding: 2px 10px; background: skyblue; } table tbody tr td { width: 80px; height: 50px; border-right: 1px solid #eeeeee; text-align: center; border-bottom: 1px solid #eeeeee; word-break: keep-all; padding: 2px 10px; }实现效果如下:
到此这篇关于html中table固定头部表格tbody可上下左右滑动的文章就介绍到这了,更多相关html中table固定头部内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!
相关文章
-
这篇文章主要介绍了html Table 表头固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
2019-01-22
-
利用纯css实现table固定列与表头中间横向滚动的思路和实例
这篇文章主要给大家介绍了关于如何利用纯css实现table固定列与表头,中间横向滚动的相关资料,文中通过示例代码详细的给大家介绍了关于实现该效果的思路与方法,对大家的学2017-09-11
-
html css 控制div或者table等固定在指定位置的实现方法
下面小编就为大家带来一篇html css 控制div或者table等固定在指定位置的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考,一起跟随小编过来看看吧2016-06-13
-
固定 table宽度 table-layout: fixed
如果单元格中的文本超过宽度限制,就会自动换行,高度自动增高,导致整个表格的样式参差不齐,不过可以通过禁用文本换行来解决这个问题2014-05-15
-
固定表头,顾名思义,就是在一个表中,表头固定,在拖动滚动条时,仅限表体移动,但是当横向拖动滚动条时,表头也会跟随表体一起移动,下面一起看看是如何实现的
2014-05-12
-
页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有个不错的方法可以有效解决这个问题
2014-02-17
-
在某些时候会实现如这样的效果:固定Table第一行或某几行不随滚动条滚动而滚动,示例代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
2013-08-07
-
为了布局的美观度需要在html中固定标题列、标题头,本文整理了一些相关实现技巧,经测试还不错,感兴趣的朋友可以参考下哈,希望对你有所帮助
2013-04-26
-
一次性将数据全部显示出来,页面就会出现滚动条,这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题
2012-12-13
最新评论