table中head表头固定,body滚动
2016-11-01 10:15
465 查看
<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();
这样就可以了,这是我看到的,试了试,可以实现。
相关文章推荐
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
- 锁定表头和固定列(Fixed table head and columns)
- 【经典思维】table 表头固定,内容自由滚动
- 锁定表头和固定列(Fixed table head and columns)
- table 标签中 头部固定,body部分滚动
- 锁定表头和固定列(Fixed table head and columns) (转发)
- table表头固定,内容可滚动问题
- Chrome固定table表头thead,表体tbody滚动
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- 锁定表头和固定列(Fixed table head and columns)
- table表固定表头的滚动
- js简单固定table表头及css问题分析。 复制代码 <head> <meta name="viewport" content="width=device-width" /> <ti
- bootstrap的table表头固定tbody滚动
- 实现table表头固定 内容滚动效果
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- JS实现table表格固定表头且表头随横向滚动而滚动
- 记录:固定table表头不动内容滚动
- 锁定表头和固定列(Fixed table head and columns)
- 锁定表头和固定列(Fixed table head and columns)
- BootStrap的table表头固定tbody滚动的实例代码