table中head表头固定,body滚动
来源:互联网 发布:申请淘宝账号注册 编辑:程序博客网 时间:2024/05/18 16:16
<div style="width: 800px;">
<div class="table-head"> <table> <colgroup> <col style="width: 80px;" /> <col /> </colgroup> <thead> <tr><th>序号</th><th>内容</th></tr> </thead> </table> </div> <div class="table-body"> <table> <colgroup><col style="width: 80px;" /><col /></colgroup> <tbody> <tr><td>1</td><td>我只是用来测试的</td></tr> <tr><td>2</td><td>我只是用来测试的</td></tr> <tr><td>3</td><td>我只是用来测试的</td></tr> <tr><td>4</td><td>我只是用来测试的</td></tr> <tr><td>5</td><td>我只是用来测试的</td></tr> <tr><td>6</td><td>我只是用来测试的</td></tr> <tr><td>7</td><td>我只是用来测试的</td></tr> <tr><td>8</td><td>我只是用来测试的</td></tr> <tr><td>9</td><td>我只是用来测试的</td></tr> <tr><td>10</td><td>我只是用来测试的</td></tr> <tr><td>11</td><td>我只是用来测试的</td></tr> <tr><td>12</td><td>我只是用来测试的</td></tr> <tr><td>13</td><td>我只是用来测试的</td></tr> <tr><td>14</td><td>我只是用来测试的</td></tr> <tr><td>15</td><td>我只是用来测试的</td></tr> </tbody> </table> </div> </div>
下面是css样式
.table-head{padding-right:17px;background-color:#999;color:#000;}.table-body{width:100%; height:300px;overflow-y:scroll;}.table-head table,.table-body table{width:100%;}.table-body table tr:nth-child(2n+1){background-color:#f2f2f2;}
1、使用了colgroup标签,来对上下两个表格的列宽进行了定义,让他们保持一致。
2、上边的div .table-head添加了样式 padding-right : 17px ,这个宽度是为了保证跟下边的div .table-body的滚动条保持一致,同时下边的表格.table-body添加了样式 overflow-y : scroll ;
以上方法试了后,发现有时会出现宽度不对齐的问题,当然了可以设置每个th td的宽度就可以修改这个问题了,但是
我觉得因为还是用了2个table的原因吧,觉得还是好复杂,所有就重新查询了一下,发现还真有好的解决方法:
一个table中thead tbody就可以了。
table tbody { display:block; height:500px; overflow-y:scroll;}table thead, tbody tr { display:table; width:100%; table-layout:fixed;}table thead { width: calc( 100% - 1em )}
/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();
这样就可以了,这是我看到的,试了试,可以实现。
0 0
- table中head表头固定,body滚动
- table中资料过多,表头固定,清单添加滚动条
- GridView(table) 滚动条 固定表头、列
- 实现table表头固定 内容滚动效果
- bootstrap的table表头固定tbody滚动
- table表头固定表体滚动
- html中table固定表头
- table的表头固定--上下滚动表头固定,左右滚动跟随滚动
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- html 中固定表头的 table
- 需要管理的6.0权限列表
- git pull报错:Auto Merge Failed; Fix Conflicts and Then Commit the Result
- Spring Batch(5): Step详解
- Mongodb简介
- regex in SearchEverything
- table中head表头固定,body滚动
- PHP内存释放有关的操作
- mybatis测试的时候报错No suitable driver found for jdbc。。。解决办法
- hadoop1.x 与hadoop2.x 架构变化分析
- 关键字错误。。。
- Convolutional Networks for MNIST in Tensorflow
- 备忘录
- java 对象转换为json
- 分别用ffmpeng和taglib开源库获取音频文件中的专辑封面图片