粘性标题后面的内容在可滚动表格中可见

Question

当前的问题看起来是这样的，如图所示，当滚动到标题后面时，内容仍然有点可见。如何解决这个问题并使内容在滚动到粘性标题后面时不可见？

.tableUpdates {
        overflow-y: auto;
        height: 250px;
    }

    .tableUpdates thead th {
        position: sticky;
        margin-top:0px;
        top: 0;
        background: #DC3545;
    }

<div class="col-md-4 pr-0 tableUpdates">
    <table class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th>Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>


    

Answer 1

这是table和th元素的一个奇怪的怪癖。如果任一元素有顶部边框，您将得到此行为。边框实际上是滚动的并且不会粘住，从而留下了间隙。

一种技巧是重写为和元素border-top的宽度为 0 。tableth

CSS

#myTable {
    border-top: 0 solid black;
}

#myHeader {
    border-top: 0 solid black;
}

超文本标记语言

<div class="col-md-4 pr-0 tableUpdates">
    <table id="myTable" class="table table-bordered table-hover">

           <thead class="bg-danger text-light">
               <tr>
                  <th id="myHeader">Header</th>
               </tr>
            </thead>
            
            <tbody>
               .....some rows
            </tbody>
    </table>
</div>

当然，那么你就没有顶部边框了......

Answer 2

将粘性标题沿内容显示的方向移动一或 2 个像素。因此，如果粘性标题从顶部显示内容。top只需使用css将标题向上移动一点即可。这应该会移动您的标题，以便内容不会泄漏。