I am currently working on a responsive table where the first two columns are fixed and the rest are made to float. However, I have encountered some issues and have a few questions:
- Why do the headers for the first two columns float to the top of the header row, while the rest stick to the bottom?
- How can I ensure that all headers stick to the bottom consistently?
https://i.sstatic.net/FUjua.png
Here is the HTML code:
<div class="container">
<div class="table-responsive">
<table class="table" style="table-layout: auto; width: auto">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Floating</th>
<th>Floating</th>
<th>Floating</th>
<th>Floating</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>999 Acacia Avenue</td>
<td>Some longish text value</td>
<td>Another longish text value</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is the corresponding CSS:
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(1) {
position: absolute;
width:30px;
left:0px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(2) {
position: absolute;
width:60px;
left:30px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(3) {
padding-left:30px;
}
.table > tbody > tr > td:nth-child(1) {
position: absolute;
width:30px;
left:0px;
}
.table > tbody > tr > td:nth-child(2) {
position: absolute;
width:60px;
left:30px;
}
.table> tbody > tr > td:nth-child(3) {
padding-left:30px;
}
th {
height: 100px;
}
td {
white-space: nowrap;
}