Fix and scrollable table structure using html div

Question

I want to create a grid of a table where the first few columns are fixed, and the rest of them scroll, as shown in this image.

The remaining columns are dynamic; the user can select and deselect columns. I'm struggling to make this html using div or tables. It takes guidance or sampling structure to move on.

Answer 1

With custom implementation. Just:

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 the correction of the first column of the header.

With the original CSS, it just applies to "th", but uses classes (in this example, col1, col2, etc.)

We can assign different fixed positions to different columns.

Since the columns are 100 pixels wide, each subsequent column is located on another 100px on the left. So, the first one is 0px, then 100px for col2, etc.) to avoid matching the previous column.

Answer 2

Something like that? I used the gradient to show that the .scrollable-div class is moving:

 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> 

Table layout you could just put in divs

Hope this helps