在表格单元格边框间距 CSS 中可以看到隐藏的行/列

Posted 2023-02-22

【中文标题】在表格单元格边框间距 CSS 中可以看到隐藏的行/列

【英文标题】：Hidden row/columns can be seen in table cell border-spacing CSS

【发布时间】：2022-01-13 00:05:45

【问题描述】：

我有一个固定 x 顶行数和 y 左列数的表格。

点赞：https://jsfiddle.net/26m75fge/11/

CSS：

div 
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;
 


table 
  position: relative;
  border-collapse: collapse;


td,
th 
  padding: 0.25em;
  border: 0.25em solid white;


thead tr:nth-child(1) 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0.25em;
  background: #000;
  color: #FFF;
  z-index: 2;


thead tr:nth-child(2) 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 2em;
  background: #000;
  color: #FFF;
  z-index: 2;


thead th:first-child 
  left: 0;
  z-index: 1;


tbody th 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;

html：

  <table>
    <thead>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
    ....
      </tr>
      <tr>
        <th></th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
        <th>head</th>
 ....
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
       .....
      </tr>
    </tbody>
  </table>
</div>

但是，当我滚动其他单元格时，我可以在表格的背景/边框间距中看到“隐藏”行。 （参见：边框间距中的单元格）

有没有办法使用 CSS/JS 隐藏这些边框，以便这些单元格在滚动后不会显示？

cells in border spacing

【参考方案1】：

设置边框样式：隐藏；用于表、tad、tbody、tr 然后将您的 th、td 填充和边框更改为所需的总长度，最后更改为 top: 0;对于粘性元素。见下文。

div 
  max-width: 40em;
  max-height: 20em;
  overflow: scroll;
  position: relative;


table 
  position: relative;
  border-collapse: collapse;
  

table, thead, tbody, tr 
  border-style: hidden;


td,
th 
  padding: 0.4em;
  border: 0.4em solid white;


thead 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
  z-index: 2;


thead th:first-child 
  left: 0;
  z-index: 1;


tbody th 
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
  background: #FFF;
  border-right: 1px solid #CCC;

【参考方案2】：

您可以将其添加到您的 css 中：

th 
  position: sticky;
  height: 50px;
  width: 100%;
  background: white;

根据需要调整这些值。此外，请参考以下其他来源： How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

https://css-tricks.com/position-sticky-and-table-headers/