table禁止标题行随数据行滚动的简单实现
在工作中,总是会遇到列表展示,在列表展示时,会要求标题行不动,其余数据行滚动情况.如果有框架,那么使用框架是最简单的.
那么不使用框架时,怎么办呢?那就是抄框架的底层实现.
如果不想抄框架,那就自己去实现,我暂时有三种实现思路
1.不使用table,而是用div画表单,这样的话,我们只需要将标题行所在的div固定不动就行了
2.单个table,这个时候,可以通过js加css,来使得首行不动,只有数据行滚动
3.使用三个div,两个table来实现,我今天主要讲的也是这种实现方式
实现思路:
三个div,
- 一个是总的容器div1,一个放标题行table的div2,一个数据table的div3,
- 三个div设置高度和宽度,其中div2+div3的高度不能大于div1.div3的宽度要大于等于div2的宽度(下拉滚动条位置),div2和div3的宽度都要大于他们各自的table
- 滚动条设置,总的div1,禁止纵向滚动,(当然,也可以通过高度的设置,避免纵向的滚动),可以左右滚动
- div2可以纵向滚动,不能左右滚动(如果宽度设置合理,也可以)
对于两个table
- td设置width属性.属性是具体值,不是百分比
- td的宽度加起来不等大于table的宽度
- 可以在table属性中使用table-layout: fixed;不过,如果table中有英文,还要在td上加word-break: break-all属性
如果不想使用table-layout: fixed,直接在td上加word-break: break-all属性也是可以的
<!DOCTYPE html>
<head><meta charset="UTF-8"><title></title><style> .mytable { padding: 0; margin: 0; border-collapse: collapse; table-layout: fixed; font-size: 15px; } .mytable td { border: 1px solid #C1DAD7; word-break: break-all; } .alt td { background: #87CEEB; } .mytable tr:hover { background-color: yellow !important; } .mytable tr:nth-child(2n+1) { background-color: #F5FAFA; } </style></head><body><div id="dataShowDiv" style="overflow-y:hidden;height: 800px;"><div id="tableName" style="width:2410px;height: 80px;"><table class="mytable" style="width:240px;height: 80px;"><tr class="alt"><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:40px">标题</td><td style="width:80px">标题</td><td style="width:100px">标题</td><td style="width:200px">标题</td><td style="width:200px">标题</td><td style="width:40px">标题</td><td style="width:100px">标题</td><td style="width:200px">标题</td><td style="width:200px">标题</td><td style="width:200px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:40px">标题</td><td style="width:100px">标题</td><td style="width:100px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:50px">标题</td><td style="width:80px">标题</td><td style="width:40px">标题</td><td style="width:40px">标题</td></tr></table></div><div id="dataShow" style="overflow-x:hidden;width:2450px;height: 700px;"><table class="mytable" style="width:2400px"><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr><tr><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:80px">2020-05-21</td><td style="width:100px">时间长很好</td><td style="width:200px">内容</td><td style="width:200px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容内容内容内容内容内容内容</td><td style="width:200px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:40px">内容</td><td style="width:100px">内容</td><td style="width:100px">内容</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:50px">1111</td><td style="width:50px">内容</td><td style="width:50px">辽宁</td><td style="width:50px">内容</td><td style="width:50px">内容</td><td style="width:80px">内容</td><td style="width:40px">2722</td><td style="width:40px">1</td></tr></table></div></div></body>
单个table实现方式:注意,这种方式有缺陷,如果想用,需要进行优化和改进
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css"> table { position: relative; overflow-y: scroll; width: 2000px; margin: 0; padding: 0; border-collapse: collapse; } thead { width: 100%; position: absolute; left: 0; top: 0; background-color: #888888; height: 30px; } tbody { display: block; height: 800px; overflow: scroll; margin-top: 30px; } td { width: 200px; line-height: 30px; } </style></head><body><table id="th" cellpadding="0" cellspacing="0"><thead><tr><td>001</td><td>002</td><td>003</td><td>004</td><td>005</td><td>006</td><td>007</td><td>008</td><td>009</td><td>0010</td></tr></thead><tbody><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><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><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></tbody></table></body></html>
蔚落
淩亂°似流年
àì夳堔傛蜴生んèń
Myth丶恋晨
朱雀
还没有评论，来说两句吧...