表固定的标题和可滚动主体，标题后面的内容存在问题

Question

我有一张桌子，需要一个标头进行垂直滚动。不带滚动的表如下所示：

Bu我滚动时遇到了这个问题：

在红色正方形中，您可以看到表格的主体位于标题的后面。如果我将border-top设置为0，则可以解决此问题，但是我需要表格具有该边框，我不想更改样式。

粘性标头技巧的主要css是这样的：

.tableFixHead {
    overflow-y: auto;
    height: 100px;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

.tableFixHead th {
    background: white;
    /*border-top: 0 !important;*/
}

.table-responsive-bold{
    font-weight: bold;
}

我有这个小提琴来测试问题：https://jsfiddle.net/pmiranda/eaLv7qpn/1/

我还不得不将th元素的背景色设置为白色。我从https://stackoverflow.com/a/47923622/3541320

接受了这个想法

有什么建议吗？

Answer 1

这是因为您将边框折叠设置为折叠。删除它，并将间距设为0px。然后添加边框。

nc

https://jsfiddle.net/7kasL5mg/

Answer 2

要在粘贴标头时保留边框，您将需要在thead中使用此CSS：

.tableFixHead thead th { position: sticky;  top: 0;  border: 1px solid #c0c0c0;}

我选择了#c0c0c0作为颜色，但是您可以使用任意的灰色。

以下是小提琴的屏幕截图，其中添加了边框样式：