So, basically following image easily describes my issue. What I need is thead headers being aligned with tbody cells while keeping the functionality of fixed header with scroll bar for tbody. Can anyone help me with that please?
Right now, if you inspect it on the Codepen, the thead have same width as tbody but somehow the size of cells in the thead is different one compared to tbody.
https://codepen.io/seva98/pen/qBZZrKG
.container {
width: 600px
}
table {
display: inline-grid;
grid-template-areas: "head-fixed" "body-scrollable";
width: calc(100%);
}
th,
td {
width: 33%;
padding: 2px 16px;
}
thead {
grid-area: head-fixed;
}
tbody {
grid-area: body-scrollable;
overflow: auto;
height: 200px;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}<div class="container">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>1</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>2</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>3</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>4</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>5</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>6</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>7</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>8</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>9</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>10</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
<tr>
<td>11</td>
<td>Short</td>
<td>Loooooooooong text</td>
</tr>
</tbody>
</table>
</div>