html - 表格固定标题和可滚动正文，标题后面的内容有问题

Question

我有一个需要垂直滚动的粘性标题的表格。没有滚动的表格如下所示：

但是当我滚动时我遇到了这个问题：

在红色方块中，您可以看到表格主体位于标题后面。如果我将边框顶部设置为 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

有什么建议吗？

标签： htmlcsshtml-table

Answer 1

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

.tableFixHead { overflow-y: auto; height: 300px; }
.tableFixHead thead th {position: sticky;  top: 0; }
.tableFixHead th { background: white; }

/* Just common table stuff. Really. */
table  { width: 100%; border: .5px solid black; border-spacing: 0px;}
table td, table th { border: .5px solid black;  }

https://jsfiddle.net/7kasL5mg/