使用 html div 修复和可滚动的表结构答案

【问题标题】：Fix and Scrollable table structure using html div使用 html div 修复和可滚动的表结构
【发布时间】：2017-08-17 05:20:46
【问题描述】：

我想创建一个表格网格，其中前几列是固定的，其余列是可滚动的，如图所示。

其余列是动态的，用户可以选择和取消选择列。我正在努力使用 div 或表格制作该 html。需要指导或示例结构才能继续。

【问题讨论】：

你在为这个网格使用任何插件吗？
不，我现在只是使用表格，但使用表格看起来不可能
使用jquery数据表。datatables.net/extensions/fixedcolumns/examples/initialisation/…
不能使用 jquery 数据表。必须编写自定义实现

标签： html css tabular

【解决方案1】：

使用自定义实现。就这么简单：

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/

注意：

position:absolute; 是导致第一个标题列被修复的原因。

使用原始 CSS，它只是应用于“th”，但使用了类（在本例中为 col1、col2 等）

我们可以为不同的列分配不同的固定位置。

因为列是 100px 宽，所以每个后续列的位置都向左 100px 所以，第一个是 0px，然后是 col2 的 100px，等等）以避免与前一列重叠。

【讨论】：

谢谢，但我用更多列修改了你的小提琴，但它似乎不起作用jsfiddle.net/jyo8njm9
如果我将修复类添加到它不起作用的任何列，这是不可定制的

【解决方案2】：

这样的？我使用渐变来显示.scrollable-div 类正在移动：

html, body {
  margin: 0px;
}

.wrapper {
  width: 2500px;
  height: 200px;
}

.fixed-div {
  position: fixed;
  float: left;
  background: #faaaaa;
  width: 500px;
  height: 200px;
  border-right: solid 3px black;
}

.scrollable-div {
  margin-left: 500px;
  float: left;
  width: 2000px;
  height: 200px;
  background: #ffe9d3;
  background: -moz-linear-gradient(left,  #ffe9d3 0%, #b25b03 100%); 
  background: -webkit-linear-gradient(left,  #ffe9d3 0%,#b25b03 100%);
  background: linear-gradient(to right,  #ffe9d3 0%,#b25b03 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe9d3', endColorstr='#b25b03',GradientType=1 );
}

<div class="wrapper">
  <div class="fixed-div">
  </div>

  <div class="scrollable-div">
  </div>
</div>

您可以将表格标记放在 div 中

希望对你有帮助

【讨论】：