After implementing a fixed table header for an HTML table on my website, I encountered a minor issue. When scrolling down, the table header remains at the top as intended, but the CSS styling for borders within each <th> element disappears. The font weight and text alignment remain unchanged while scrolling. Here is the code snippet:
HTML:
<div class="tableFixHead">
<table id="Downloads" class="sort">
<thead>
<tr>
<th>Application</th>
<th>Release Version</th>
<th>Application Type</th>
<th>Download File Type</th>
<th>Download File Size</th>
<th>Download Button</th>
<th>Download Progress</th>
<th>Download Message</th>
<th>Save File</th>
</tr>
</thead>
<tbody>
<!--Rows for the body of the table-->
</tbody>
</table>
</div>
CSS:
table {
margin: auto;
border-collapse: collapse;
}
.tableFixHead {
overflow-y: auto;
height: 600px;
}
.tableFixHead thead th {
background-color: orange;
font-weight: 600;
text-align: center;
border: 3px solid #3F2860;
}
jQuery:
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
In an attempt to restore the borders, I adjusted the css() method in jQuery with no success:
$th.css({'font-weight':'600', 'text-align':'center', 'border':'3px solid #3F2860', 'transform':'translateY('+ this.scrollTop + 'px)'});
According to the documentation, the css() method should not overwrite existing styles but rather append to them. Therefore, my suspicion is not on the jQuery script. You can view the table on this page: , located about one-third down the page. Any assistance would be greatly appreciated!