table表头固定，内容滚动

最近接到一个需求，要thead表头固定，tbody内容实现滚动。
简单，给tbody加高度就行了。

什么？！竟然不行失败了！！
既然无法限制tbody本身的高度，那就给它套一个div，限制div的高度，让tbody在div里面滚就好了。
但是！！table里面，不能在tbody外面套div！浏览器无法解析！会变成这样：

哎呀，这也不行那也不行，到底要怎么搞？
找了别人的代码，好家伙！可以用两个table来实现这个功能。
第一个table管理thead，第二个table管理tbody，再用div去包裹第二个table，限制div的高度就行了！

<style>th {background-color: rgba(0, 0, 0, .2);height: 32px;line-height: 32px;width: 60px;}td {border-right: 1px solid #eee;height: 48px;line-height: 48px;width: 60px;}
</style><body><table><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead></table><div style="height:200px;overflow: auto;"><table><tbody><tr><td>行1</td><td>行1</td><td>行1</td></tr><tr><td>行2</td><td>行2</td><td>行2</td></tr><tr><td>行3</td><td>行3</td><td>行3</td></tr><tr><td>行4</td><td>行4</td><td>行4</td></tr><tr><td>行5</td><td>行5</td><td>行5</td></tr><tr><td>行6</td><td>行6</td><td>行6</td></tr><tr><td>行7</td><td>行7</td><td>行7</td></tr><tr><td>行8</td><td>行8</td><td>行8</td></tr><tr><td>行9</td><td>行9</td><td>行9</td></tr><tr><td>行10</td><td>行10</td><td>行10</td></tr><tr><td>行11</td><td>行11</td><td>行12</td></tr><tr><td>行12</td><td>行12</td><td>行12</td></tr><tr><td>行13</td><td>行13</td><td>行13</td></tr><tr><td>行14</td><td>行14</td><td>行14</td></tr><tr><td>行15</td><td>行15</td><td>行15</td></tr><tr><td>行16</td><td>行16</td><td>行16</td></tr><tr><td>行17</td><td>行17</td><td>行17</td></tr><tr><td>行18</td><td>行18</td><td>行18</td></tr><tr><td>行19</td><td>行19</td><td>行19</td></tr><tr><td>行20</td><td>行20</td><td>行20</td></tr></tbody></table></div>
</body>

来看看效果：

成功啦！
但是这滚动条也太丑了吧！
div没有设置宽度，默认铺满，给div限制宽度，滚动条就不会离表格这么远了。
再使用colgroup来布局。这样就不需要单独设置td的宽度了。

再调整一下滚动条的样式，美化一下

::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);border-radius: 4px;
}
::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;border-radius: 3px;
}

<style>div {width: 100%;}table {width: 100%;}th {background-color: rgba(0, 0, 0, .2);height: 32px;line-height: 32px;border-right: 1px solid #eee;}td {border-right: 1px solid #eee;height: 48px;line-height: 48px;}::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.2);border-radius: 4px;}::-webkit-scrollbar {width: 6px;height: 6px;background-color: transparent;border-radius: 3px;}
</style><body><table><colgroup><col><col width="40%"><col width="40%"></colgroup><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th><th class="gutter" style="width: 2px;"></th></tr></thead></table><div style="height:200px;overflow: auto;"><table><colgroup><col><col width="40%"><col width="40%"></colgroup><tbody><tr><td>行1</td><td>行1</td><td>行1</td></tr><tr><td>行2</td><td>行2</td><td>行2</td></tr><tr><td>行3</td><td>行3</td><td>行3</td></tr><tr><td>行4</td><td>行4</td><td>行4</td></tr><tr><td>行5</td><td>行5</td><td>行5</td></tr><tr><td>行6</td><td>行6</td><td>行6</td></tr><tr><td>行7</td><td>行7</td><td>行7</td></tr><tr><td>行8</td><td>行8</td><td>行8</td></tr><tr><td>行9</td><td>行9</td><td>行9</td></tr><tr><td>行10</td><td>行10</td><td>行10</td></tr><tr><td>行11</td><td>行11</td><td>行12</td></tr><tr><td>行12</td><td>行12</td><td>行12</td></tr><tr><td>行13</td><td>行13</td><td>行13</td></tr><tr><td>行14</td><td>行14</td><td>行14</td></tr><tr><td>行15</td><td>行15</td><td>行15</td></tr><tr><td>行16</td><td>行16</td><td>行16</td></tr><tr><td>行17</td><td>行17</td><td>行17</td></tr><tr><td>行18</td><td>行18</td><td>行18</td></tr><tr><td>行19</td><td>行19</td><td>行19</td></tr><tr><td>行20</td><td>行20</td><td>行20</td></tr></tbody></table></div>
</body>

效果

如果还有样式不太合适，就自己调一下吧。

table表头固定，内容滚动相关推荐

div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...
java 表头固定_BootStrap的table表头固定tbody滚动的实例代码
关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: 栏目一栏目二栏目三栏目一栏目二栏目三星期一星期二星期三星期一星期二星期三星期一星期二星期二星期三星期一 ...
html ＜table＞表格表头固定内容滚动代码拿去就能用
纯 html.css代码写的 table 表格先来看下pc端的效果图移动端的效果图,前面两张是静态图,第三张是gif动态图 (像素失真了 •︿• ) 公司的移动端项目,用的是react,页面需求是 ...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
html table表头说明,HTML table表头固定
HTML table表头固定说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
table表头固定，底部可滚动
需求:实现table表头固定,表体可滚动思路: tbody使用display:block,固定高度,并设置over-y:scroll, thead和tr,使用display:table,使用tabl ...
html5手机表头设置,html Table 表头固定的实现
本文介绍了html table 表头固定的实现,分享给大家,具体如下: 合同号签约客户发布客户合同状态选定条件的发布周期额度看看css *{ padding:0; margin:0; } th{ b ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...

table表头固定，内容滚动

table表头固定，内容滚动相关推荐

最新文章

热门文章