使用html div修复和Scrollable表结构

概述我想创建一个表格网格,其中前几列是固定的,其余部分是可滚动的,如此图所示. 其余列是动态的,用户可以选择和取消选择列.我正在努力使用div或表格制作html.需要指导或样本结构继续前进. 使用自定义实现.就像这样简单： table { table-layout: fixed; width: 100%; *margin-left: -100px;/*ie7*/}td, th { 我想创建一个表格网格,其中前几列是固定的,其余部分是可滚动的,如此图所示.

其余列是动态的,用户可以选择和取消选择列.我正在努力使用div或表格制作HTML.需要指导或样本结构继续前进.

解决方法 使用自定义实现.就像这样简单：

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 >   <div >      <table>         <tr>            <th >header A</th>            <th >header A</th>            <th >header A</th>            <th >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 >header B</th>            <th >header B</th>            <th >header B</th>            <th >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 >header C</th>            <th >header C</th>            <th >header C</th>            <th >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表结构所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。