jQuery滚动功能上CSS边框消失

Question

我在网站上为HTML表创建了一个固定的表头。向下滚动时，表格标题会像我希望的那样保持在顶部，这样用户就可以记住有哪些列类别。然而，当向下滚动时，我为每个<th>元素声明的CSS都会消失，该CSS是边框(不知何故，保留了字体重量和文本对齐方式)。这是我的代码：

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)');
});

作为保留/维护边界的努力的一部分，我在jQuery中编辑了css()方法，但输出结果相同：

$th.css({'font-weight':'600', 'text-align':'center', 'border':'3px solid #3F2860', 'transform':'translateY('+ this.scrollTop + 'px)'});

从我读过的文档来看，css()方法不会覆盖你之前在元素上设置的样式，而是附加到它上面。所以我认为我的问题不在于jQuery。表格在页面上https://maxstechandmathsite.azurewebsites.net/Random大约三分之一的路程。非常感谢您的帮助！

Answer 1

这是因为您有边界塌陷：塌陷；在你的表元素上，它去掉了边框。如果您更改它，然后用所需的边框样式标记表，它应该可以工作。如果你仔细观察，你添加的边框甚至都不存在(让它看起来像13px)。你只会看到后面滚动的实际表格有很大的差距。

table{
border-collapse: separate;
}
.tableFixHead thead th, .tableFixHead td{
border: 3px solid #3F2860;
}