table固定头部,表格tbody可上下左右滑动
2017-11-03 13:55
453 查看
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:
html代码:
css样式:
实现效果如下:
html代码:
<div class="table_box_big"> <div class="table_box"> <table> <thead> <tr> <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th><div>标题标题标题标题标题标题标题标题标题四</div></th> <th><div>标题标题标题标题标题标题标题标题标题五</div></th> <th><div>标题标题标题标题标题标题标题标题标题六</div></th> </tr> </thead> </table> <div class="table_tbody_box"> <table> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> <tr> <td>信息一</td> <td>信息二</td> <td>信息三</td> <td>信息信息信息信息信息信息信息信息信息四</td> <td>信息信息信息信息信息信息信息信息信息五</td> <td>信息信息信息信息信息信息信息信息信息六</td> </tr> </table> </div> </div>
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;}
实现效果如下:
相关文章推荐
- table固定头部,表格tbody可上下左右滑动
- Android实现Excel表格,且表格能左右、上下滑动
- 随窗口大小改变可以上下左右滚动的表格(表格标题固定,IE6)
- table表格布局,表头固定不动,表身超出可滑动
- table表格中实现tbody部分可滚动,且thead部分固定
- Android实现Excel表格,且表格能左右、上下滑动
- 表格第一列固定,右边内容可以左右滑动
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- jquery 动态的把table左边列表固定不动,右边可上下滑动。
- 带表头 固定列可左右上下滑动的可分页加载的ListView
- Android TableFixHeaders 最后添加一行计算总和,上下不能滑动,左右可以滑动
- HorizontalScrollView里嵌套ListView实现上下左右滑动表格
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- android股票联动_第一列固定其他列可左右上下滑动
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- Android实现了复杂表格,表格内容区域可以与上下滑动、左右滚动,并且标题会跟着滚动
- 表格table的thead固定,tbody显示滚动条,滚动条不占位
- 左右上下滑动表格
- table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。
- 针对表格操作,包括复制表格行,添加表格行,键盘上下左右键进行表格上每个td的上下左右切换;支持火狐 谷歌 ie等浏览器