JSFiddle - React, Tailwind, and code Playground
by yeuem1vannam
HTML
<div class="fixed-table-container complex">
<div class="header-background"></div>
<div class="fixed-table-container-inner">
<table cellspacing="0">
<thead>
<tr class="complex-top">
<th class="first" colspan="2">
<div class="th-inner">First and Second</div>
</th>
<th class="third" rowspan="2">
<div class="th-inner">Third</div>
</th>
</tr>
<tr class="complex-bottom">
<th class="first">
<div class="th-inner">First</div>
</th>
<th class="second">
<div class="th-inner">Second</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>First</td>
<td>First</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
...CSS
td {
border-bottom: 1px solid #ccc;
padding: 5px;
text-align: left;
/* IE */
}
td + td {
border-left: 1px solid #ccc;
}
th {
padding: 0 5px;
text-align: left;
/* IE */
}
.header-background {
border-bottom: 1px solid black;
}
/* above this is decorative, not part of the test */
.fixed-table-container {
width: 50%;
height: 200px;
border: 1px solid black;
margin: 10px auto;
background-color: white;
/* above is decorative or flexible */
position: relative;
/* could be absolute or relative */
padding-top: 30px;
/* height of header */
}
.fixed-table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.header-background {
background-color: #D5ECFF;
height: 30px;
/* height of header */
position: absolute;
top: 0;
right: 0;
left: 0;
}
table {
background-color: white;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.th-inner {
position: absolute;
top: 0;
line-height: 30px;
/* height of header */
text-align: left;
border-left: 1px solid black;
padding-left: 5px;
margin-left: -5px;
}
.first .th-inner {
border-left: none;
padding-left: 6px;
}
/* for complex headers */
.complex.fixed-table-container {
padding-top: 60px;
/* height of header */
overflow-x: hidden;
/* for border */
}
.complex .header-background {
height: 60px;
}
.complex-top .th-inner {
border-bottom: 1px solid black;
width: 100%
}
.complex-bottom .th-inner {
top: 30px;
width: 100%
}
...