在表格單元格邊框間距CSS中可以看到隱藏的行/列

我有一個表格，其中頂行數固定為 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 來隱藏這些邊框，以便這些單元格在滾動后不顯示？

邊框間距的單元格

uj5u.com熱心網友回復：

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

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

根據需要調整這些值。另外，請參考這些其他來源： 如何在引導程式 3 中向下滾動帶有固定標題（導航欄）的表格行時將表格標題（thead）粘貼在頂部？

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

uj5u.com熱心網友回復：

設定邊框樣式：隱藏；對于 table、thead、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;
}

標籤：javascript html css Vue.js

上一篇：Vue：如何在svg影像上使用v-bind？

下一篇：如何從組件中的vue函式傳遞引數？