In my current project, I came across a Pen shared by Balaji731 on Bootstrap 4 table with the scrollable body and header fixed.
While testing the Pen in Microsoft Edge, I noticed that when <th> borders are enabled, they disappear while scrolling, creating a visual gap and rendering issues with the thead contents.
To address this, I temporarily set border: 0; on the <th> elements, which is not an ideal solution. I am seeking advice on a better approach to resolve this issue. Any suggestions?
<div class="table-responsive">
<table class="table table-hover" id="job-table">
<thead>
<tr class="text-center">
<th scope="col">Sr.No.</th>
<th scope="col">Company Name</th>
<th scope="col">Technology</th>
<th scope="col">Total Resumes</th>
<th scope="col">Job Title</th>
<th scope="col">Total Score</th>
<th scope="col">Average Score</th>
</tr>
</thead>
<tbody>
<tr key={key}>
<td class="font-weight-bold">1</td>
<td class="font-weight-bold">ABCDED</td>
<td>Software Developer</td>
<td class="font-weight-bold">17</td>
<td>5 years experience</td>
<td class="font-weight-bold">30</td>
<td class="font-weight-bold">30</td>
</tr>
<tr key={key}>
<td class="font-weight-bold">1</td>
<td class="font-weight-bold">ABCDED</td>
<td>Software Developer</td>
<td class="font-weight-bold">17</td>
<td>5 years experience</td>
<td class="font-weight-bold">30</td>
<td class="font-weight-bold">30</td>
</tr>
</tbody>
</table>
Here's the CSS:
.table-responsive{
height:400px;
overflow:scroll;
}
thead tr:nth-child(1) th{
background: white;
position: sticky;
top: 0;
z-index: 10;
}