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.
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
