Fix and Scrollable table structure using html div

Question

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.

No I am just using table for now but looking impossible using tables — Ghazanfar Khan, Mar 24 '17 at 10:12
Use jquery data table.https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html — Nitha, Mar 24 '17 at 10:18
Can't use jquery datatable . Have to write custom implementation — Ghazanfar Khan, Mar 24 '17 at 10:22

Ave · Accepted Answer · 2017-03-24T10:52:34.410

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.

Thanks but I modified your fiddle with more columns but its doesnot seem to work https://jsfiddle.net/jyo8njm9/ — Ghazanfar Khan, Mar 24 '17 at 10:36
This is not customizable if I addd fix class to any column it doesn't work — Ghazanfar Khan, Mar 24 '17 at 10:43

score 0 · Answer 2 · answered Mar 24 '17 at 10:29

Something like this? I used 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>

The table markup you could just put inside the divs

Hope it helps

Fix and Scrollable table structure using html div

2 Answers2

Linked