使用html div修复和滚动表格结构 [英] Fix and Scrollable table structure using html div

问题描述

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

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

解决方案

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

table {table-layout ：固定的;宽度：100％; * margin-left：-100px; / * ie7 * /} td，th {vertical-align：top; border-top：1px solid #ccc;填充：10px的; width：100px;}。col1 {position：absolute; *职位：亲戚; / * ie7 * / left：0; width：100px;}。col2 {position：absolute; *职位：亲戚; / * ie7 * / left：100px; width：100px;}。col3 {position：absolute; *职位：亲戚; / * ie7 * / left：200px; width：100px;}。col4 {position：absolute; *职位：亲戚; / * ie7 * / left：300px; width：100px;}。outer {position：relative} .inner {overflow-x：scroll;溢出-Y：可见;宽度：500像素; margin-left：400px;}

< div class = 外 > < div class =inner> <表> < TR> < th class =col1>标题A< / th> < th class =col2>标题A< / th> < th class =col3>标头A< / th> < th class =col4>标题A< / th> < td> col 2 - A（具有更长的内容）< / 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>标题B< / th> < th class =col2>标题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>标题C< / th> < th class =col2>标题C< / th> < th class =col3>标头C< / th> < th class =col4>标题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> < /表> < / div>< / div>

$ b 或者jsfiddle：

https://jsfiddle.net/h75zn59o/ 21 /

注意：

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



使用原始CSS，它只适用于th，但使用类（在本例中为col1，col2等）。 b


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

因为列的宽度是100px，所以每个后面的列的位置还剩100px所以第一个是0px，然后是colpx的100px等），以避免与上一列。

I want to create a table grid where first few columns are fixed and rest of them are scrollable as seen in this image.

Rest of the columns are dynamic, user can select and deselect columns. I am struggling to make that html using div or tables. Need guidance or sample structure to move on.

解决方案

With custom implementation. Just simple like this:

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>

Or jsfiddle:

https://jsfiddle.net/h75zn59o/21/

Note:

position:absolute; is what causes that first header column to be fixed.

With the original CSS, it's just applied to "th", but using classes (in this example, col1, col2, etc.)

We can assign different fixed positions to different columns.

Because the columns are 100px wide, each following column is positioned another 100px left So, the first one is 0px, then 100px for col2, etc) to avoid overlap with the previous column.

这篇关于使用html div修复和滚动表格结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！