Trying to implement a fixed header table, but encountering issues with alignment
table-fixed tbody {
height: 300px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed tbody th,
.table-fixed thead>tr>th {
float: left;
position: ative;
&::after {
content: '';
clear: both;
display: block;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-5 col-sm-6 col-lg-8 rounded shadow">
<div class="table-responsive">
<table class="table table-fixed">
<thead>
<tr>
<th scope="col" class="col-3">#</th>
<th scope="col" class="col-3">First</th>
<th scope="col" class="col-3">Last</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="col-3">1</th>
<td class="col-3">Mark</td>
<td class="col-3">Otto</td>
</tr>
<tr>
<th scope="row" class="col-3">2</th>
<td class="col-3">Jacob</td>
<td class="col-3">Thornton</td>
</tr>
</tbody>
</table>
</div><!-- End -->
</div>Observing the result:
The table rows are not aligning correctly due to having only 3 cells in each row. Adding one more cell (total of 4) fixes the issue. The code was sourced from here, and I'm unsure where the problem lies.