使用html div修复和Scrollable表结构

发布时间：2020-12-14 18:37:52 所属栏目：资源来源：网络整理

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

我想创建一个表格网格,其中前几列是固定的,其余部分是可滚动的,如此图所示.

其余列是动态的,用户可以选择和取消选择列.我正在努力使用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 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等,以避免与前一列重叠.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!