I am working on creating a table with a fixed header. I have made some adjustments, but the header is not extending to full width as expected. Here is my code snippet and a demonstration:
To achieve the desired look, I want the table rows (tr) to fill up the entire 100% width and the table headers/cells (th/td) to cover all available space.
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background: #ccc;
display: block;
}
.fixed_headers td {
border-bottom: 1px solid #f00;
}
.fixed_headers tr{
display: flex !important;
width: 100%;
}
.fixed_headers thead {
background-color: #f00;
color: #fdfdfd;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 20%;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 30%;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 20%;
}
.fixed_headers td:nth-child(4),
.fixed_headers th:nth-child(4) {
width: 30%;
}
table.fixed_headers thead tr {
display: block;
position: relative;
}
table.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody::-webkit-scrollbar {
width: 8px;
}
.fixed_headers tbody::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #f00;
}<table class="fixed_headers">
<thead>
<tr>
<th>DATA</th>
<th>FULL NAME</th>
<th>PHONE NUMBER</th>
<th>PRIZE</th>
</tr>
</thead>
<tbody>
<!-- Repeat this row structure for demo purposes -->
</tbody>
</table>