Question

我有一个带有粘性标头的基本CSS表。在大多数情况下，标题会按预期工作，但如果我滚动浏览条目，然后单击表中的一个下载链接，则标题会按我在单击链接之前滚动的数量向下移动页面，通常会导致标题消失了代码如下（为简洁起见进行了编辑）：

HTML

<table id="viewall" style="table-layout:auto; width: auto;" class="table table-responsive">
    <thead>
        <tr>
            <th> Download Links </th>
        </tr>
    </thead>                                                 
    <tbody>   

    <td>
        @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" })

    </tbody>                                                
</table>

CSS

#viewall 
    width: 100%;
    height: 770px;
    display: block;
    margin-right:3%;
    overflow-y: auto; /* Trigger vertical scroll    */
    overflow-x: auto; /* Hide the horizontal scroll */
}

#pdf {
    color:black;
    display:inline-block;
    text-decoration:none;
}

thead {
    display: table-header-group;
}

thead tr th {
    background: white;
    position: sticky;
    top: 0; 
}

tbody {
    display:table-row-group;
}

我在弹出式警告标签上也遇到了类似的问题，但是由于某种原因，通过将CSS位置更改为fixed可以轻松解决。此修复程序不适用于链接。

编辑

仅在Chrome / Firefox中会出现此问题。

*示例：

    <table id="viewall" style="table-layout:auto; width: auto;" class="table table-responsive">
            <thead>
                <tr>
                    <th id="th0">
                        SelectAll<br />
                        <center><input type="checkbox" onclick="selectAll(this)" /></center>
                    </th>
                    <th>
                        PDF
                    </th>
                    <th id="th21" style="white-space: nowrap;">
                        Time
                    </th>

                    <th id="th3">
                        Action
                    </th>
     </tr>
            </thead>
            <tbody>
                    <tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
<tr>
                       <th>
                       <center>@Html.CheckBox()</center>                     
                       </th>                                                  
                       <td>                                     
                       @Html.ActionLink(" ", "DownloadPDF", new { emailID, attachmentID, fileName }, new { @id = "pdf", @class = "far fa-file-pdf fa-3x" }) 
                       </td>                                                    
                    <td headers="th21"> 11/11/11 </td>
                    <td headers="th3"> Buy
                    </tr> 
                }
            </tbody>
        </table>

Answer 1

要解决您的问题（这是一个Chrome错误），请在标题中添加以下行：

-webkit-transform: translateZ(0);

#viewall {
  width: 100%;
  height: 770px;
  display: block;
  margin-right:3%;
  overflow-y: auto; /* Trigger vertical scroll    */
  overflow-x: auto; /* Hide the horizontal scroll */
}

thead {
  display: table-header-group;
}

thead tr th {
  background: white;
  position: sticky;
  top: 0; 
  -webkit-transform: translateZ(0);
}

tbody {
  display:table-row-group;
}

#pdf {
  color:black;
  display:inline-block;
  text-decoration:none;
}

<table id="viewall" style="table-layout:auto; width: auto;" class="table table-responsive">
  <thead>
    <tr>
      <th> Download Links </th>
    </tr>
  </thead>                                                 
  <tbody> 
  <tr>                                                 
    <td>
      <a href="#">Link</a>
    </td>    
  </tr>
  </tbody>                                                
</table>

Answer 2

用实现使用固定表头插件的数据表的实现来替换表。

单击表主体中的链接时，粘滞表标题会跳转

2 个答案: