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

Posted 2023-03-05

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

【英文标题】：Content behind sticky header is visible in scrollable table

【发布时间】：2021-03-17 02:49:39

【问题描述】：

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

.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>


    

【问题讨论】：

可以在通用选择器中添加0的边距和内边距

@ShayanKanwal 在添加 0 的边距和填充后问题仍然存在。

【参考方案1】：

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

【讨论】：

你是怎么做到的？

【参考方案2】：

不使用位置作为粘性

将类添加到th

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

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

将css添加到类stick-nav

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


.tableUpdates thead th 
    margin-top:0px;
    top: 0;
    background: #DC3545;

.stick-nav 
   position:'fixed' # fixed the nav bar positon
   z-index:999  # hide the content

【参考方案3】：

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

一个技巧是覆盖 border-top 以使 table 和 th 元素的宽度都为 0。

CSS

#myTable 
    border-top: 0 solid black;


#myHeader 
    border-top: 0 solid black;

html

<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>

当然，那你就没有上边框了……