While working on creating a table in an excel style using html and css with a sticky header, I noticed that the borders on the table head appeared strange.
Take a look at the code snippet below:
table {
border-collapse: collapse;
position: relative;
}
tr:nth-child(even) {
background-color: lightgray;
}
th {
background-color: lightblue;
position: sticky;
top: 0;
}
th,
td {
border: 1px solid black;
padding: 10px 20px;
}<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>Visit the JSFiddle link for a visual representation of this code: https://jsfiddle.net/cpotdevin/5j3ah247/
The following images illustrate how the table appears in different browsers.
Chrome: The upper and lower borders on the sticky row disappear.
Firefox: All inner borders disappear.
Safari: Similar to Chrome's behavior.
I also experimented with removing border-collapse: collapse; and using the cellspacing=0 attribute instead, but this resulted in thicker inner borders than desired.
View the example here: https://jsfiddle.net/cpotdevin/wxvn1crL/
Any suggestions on how to address this issue? The goal is to maintain consistent border appearance when the table header is in a sticky state.
EDIT
A similar question was previously resolved, as highlighted by @JonMac1374. Visit the answer here.
Check out my implementation of the solution provided: Implementation