After much experimenting, I finally came up with fairly simple HTML that displays a table the way I want: 6 columns with specific widths, with two columns right-justified, scrolling under a fixed header row. However, the headers don't quite align to the columns:
How can I make the headers line up exactly with the data columns? My online searches have found this to be a common problem, but with no real explanation of the cause or a known simple fix.
My HTML is below. The columns widths are are magic numbers because of the data that will eventually be displayed. Making the header text normal instead of bold, or even empty headers, has no effect on alignment.
If besides solving the alignment issue you also have a more simple way of defining a table with the same features, please let me know.
Edit: box-sizing: border-box;
as recommended by ProllyGeek seemed promising because it works on the sample data above,
but using different cell data still causes alignment to be slightly off
as shown here (the Price/Drops, Drops/Description, and Item#/Posted
column borders are off even when using border-box
):
There are dozens if not hundreds of posts wanting sticky headers over scrollable rows, but apparently all solutions avoid dynamic columns, often using color to hide the alignment issue, or an enclosing div that has to know the table width to show a scrollbar properly positioned alongside dynamic column widths. Most examples ignore column widths and just use 100% wide tables with oversized columns.
There appears to be no known automatic solution for a sticky header, with dynamic column widths (no declared table width), over scrollable rows, with precise header and column alignment, using just pure CSS/HTML.
I'm just going to hide misalignments using thead { background-color: black; color: white; }
.
<style>
table {
width: 688px; /* 688 = column widths 80 + 56 + 280 + 120 + 56 + 96 */
table-layout: fixed;
font: 12px Courier;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
tbody {
display: block;
width: 703px; /* 703 = 688 table width + 15 extra for scrollbar */
overflow-y: scroll;
height: 65px;
}
thead tr { display: block; }
tr:nth-child(even) { background-color: #eee; }
th:nth-child(1), td:nth-child(1) {text-align: right; width: 80px; }
th:nth-child(2), td:nth-child(2) {text-align: left; width: 56px; }
th:nth-child(3), td:nth-child(3) {text-align: left; width: 280px; }
th:nth-child(4), td:nth-child(4) {text-align: left; width: 120px; }
th:nth-child(5), td:nth-child(5) {text-align: right; width: 56px; }
th:nth-child(6), td:nth-child(6) {text-align: left; width: 96px; }
</style>
<table>
<thead>
<tr>
<th>Price</th>
<th>Drops</th>
<th>Description</th>
<th>Category</th>
<th>Item #</th>
<th>Posted</th>
</tr>
</thead>
<tbody>
<tr>
<td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
<tr>
<td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
<tr>
<td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
<tr>
<td>$5.00<td>Oct 10<td>Valuable item<td>Miscellaneous<td>1234<td>Sep 10 2020</tr>
</tbody>
</table>
tbody
?table
.#header { position: fixed }
, or something more along these lines: algoart.fr/articles/css-table-fixed-header