How to add scrollbar only to tbody and not fixed thead - html

Question

I am trying to create a table that has a scrollable <tbody> with a fixed <thead>. I have achieved that here https://jsfiddle.net/ghnfzwm6/16/.
However, this is not quite what I would like. I want the scroll bar to start where the <tbody> starts. I have attempted to do so by adding
height: 546px;
max-height: 546px;
overflow-y: scroll; /* only Y axis scroll */
to <tbody> and removing it from #tasks-table-wrapper. I also made <tbody> and <tr> display: block;
Here is the result https://jsfiddle.net/4gLwp697/3/. The problem now is that <thead> does not line up with <tbody>. I can fix that by specifying column widths, but I want them to be auto.
How can I fix this?

Answer 1

consider this code snippet, There is no direct solution to your problem, This is determined by the 'table' feature. The solutions for the current mainstream frameworks are as follows, You need to set the width of 'columns'.
* {
margin: 0;
padding: 0;
}
#content {
overflow: hidden;
height: 100%;
text-align: center;
}
#tasks-table-wrapper {
text-align: left;
display: inline-block;
width: auto;
}
.scrollbar-wrap {
overflow: auto;
height: 100px;
}
.black-table {
border-collapse: separate;
font-size: 0;
background-color: #121212;
text-transform: uppercase;
border-spacing: 0;
}
.black-table td {
color: #bbb;
font-size: 11px;
letter-spacing: 1px;
padding: 15px 30px;
}
.black-table th {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
padding: 15px 25px;
border-bottom: 1px solid #1c1c1c;
position: sticky; /* keep TH on top */
top: 0;
background-color: #121212;
white-space: nowrap;
}
<div id="content">
<div id="tasks-table-wrapper">
<table class="black-table">
<colgroup>
<col width="180">
<col width="180">
<col width="180">
<col width="180">
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
</table>
<div class="scrollbar-wrap">
<table class="black-table">
<colgroup>
<col width="180">
<col width="180">
<col width="180">
<col width="163">
</colgroup>
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can see VUE Table with fixed header, Review the table elements.

Answer 2

Replace
#tasks tr {
display: block;
}
with
#tasks tr {
display: table;
width: 100%;
table-layout: fixed;
}
https://jsfiddle.net/5nt18cL0/