HTML table with two sticky columns and headers (using only CSS) - html

Question

I'm struggling to get two fixed columns and headers using a HTML table + scrollable body.
I've searched a lot and found these approaches:
this (only 1 fixed column/header)
and this (only 1 fixed column/header; no table markup)
and I've also created my own solution using a library, which works fine, but I don't like how the html table tag markups getting messed up & moreover initializing the colModal is not that good since I've a dynamic amount of columns.
Since I am not satisfied with any of these solutions, I would like to know if there is a chance to get this job done only using CSS?

Answer 1

The closest I came is this.
No HTML table markup and no IE support.
I used position: sticky on the header and the first column.
The dimensions of the table are variable, but the widths of the cells need to be supplied.

Answer 2

I don't think that it's possible to achieve what I want only using CSS. So I've found another library called TableHeadFixer which does not duplicate nodes and IDs in your HTML markup.
So I came up with this final solution:
https://jsfiddle.net/4s53f124/2/
All you have to do is to call the tableHeadFixer method of the library (and if you want to some CSS adjusting):
$(document).ready(function () {
$("#fixTable").tableHeadFixer({"left": 2});
});

Answer 3

One way to do this with only html and css is to add a second table within the first column where you add the first 2 columns and do the same way for the body. Maybe not the most elegant solution but it does the job with pure html and css.
thead tr>th {
background: #eee;
position: sticky;
padding: .5rem;
z-index: 2;
top: 0;
border-bottom: 1px solid black;
}
.sticky-column {
border-right: 1px solid black;
}
.sticky-column tr>th {
border-bottom: 0px solid black;
}
thead tr>.sticky-column {
z-index: 3;
left: 0;
top: 0;
}
tbody tr>.sticky-column {
background: #fff;
position: sticky;
z-index: 1;
left: 0;
}
<table id="board">
<thead>
<tr>
<th class="sticky-column">
<table>
<tr>
<th> <strong>Column 1</strong>
</th>
<th>
<strong>Column 2</strong>
</th>
</tr>
</table>
</th>
<th>
<strong>Column 3</strong>
</th>
<th>
<strong>Column 4</strong>
</th>
<th>
<strong>Column 5</strong>
</th>
<th>
<strong>Column 6</strong>
</th>
<th>
<strong>Column 7</strong>
</th>
<th>
<strong>Column 8</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
<tr>
<td class="sticky-column">
<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>
</td>
<td>
Content 3
</td>
<td>
Content 4
</td>
<td>
Content 5
</td>
<td>
Content 6
</td>
<td>
Content 7
</td>
<td>
Content 8
</td>
</tr>
</tbody>
</table>