大佬教程收集整理的这篇文章主要介绍了使用html div修复和Scrollable表结构，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
table {
table-layout: fixed;
width: 100%;
*margin-left: -100px;/*ie7*/
}
td,th {
vertical-align: top;
border-top: 1px solid #ccc;
padding:10px;
width:100px;
}
.col1{
position:absolute;
*position: relative; /*ie7*/
left:0;
width:100px;
}
.col2{
position:absolute;
*position: relative; /*ie7*/
left:100px;
width:100px;
}
.col3{
position:absolute;
*position: relative; /*ie7*/
left:200px;
width:100px;
}
.col4{
position:absolute;
*position: relative; /*ie7*/
left:300px;
width:100px;
}
.outer {position:relative}
.inner {
overflow-x:scroll;
overflow-y:visible;
width:500px;
margin-left:400px;
}
<div class="outer">
<div class="inner">
<table>
<tr>
<th class="col1">Header A</th>
<th class="col2">Header A</th>
<th class="col3">Header A</th>
<th class="col4">Header A</th>
<td>col 2 - A (WITH LONGER CONTENT)</td>
<td>col 3 - A</td>
<td>col 4 - A</td>
<td>col 5 - A</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header B</th>
<th class="col2">Header B</th>
<th class="col3">Header B</th>
<th class="col4">Header B</th>
<td>col 2 - B</td>
<td>col 3 - B</td>
<td>col 4 - B</td>
<td>col 5 - B</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
<tr>
<th class="col1">Header C</th>
<th class="col2">Header C</th>
<th class="col3">Header C</th>
<th class="col4">Header C</th>
<td>col 2 - C</td>
<td>col 3 - C</td>
<td>col 4 - C</td>
<td>col 5 - C</td>
<td>col 6 - B</td>
<td>col 7 - B</td>
</tr>
</table>
</div>
</div>
或者jsfiddle：
https://jsfiddle.net/h75zn59o/21/
注意：
位置：绝对的;是什么原因导致第一个标题列被修复.
使用原始CSS,它只是应用于“th”,但使用类(在此示例中,col1,col2等)
我们可以为不同的列分配不同的固定位置.
因为列的宽度为100px,所以每个后续列位于另一个100px左侧,因此,第一个是0px,然后是colp的100px等,以避免与前一列重叠.
以上是大佬教程为你收集整理的使用html div修复和Scrollable表结构全部内容，希望文章能够帮你解决使用html div修复和Scrollable表结构所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。