Hidden row/columns can be seen in table cell border-spacing CSS-CodePudding

I have a table with fixed x number of top rows and y number of left columns.

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

However, when I scroll my other cells I can see the "Hidden" rows in the background/ border-spacing of the table. (See: cells in border spacing)

Is there a way using CSS/JS to hide these make the border so that these cells dont show up once they are scrolled?

cells in border spacing

CodePudding user response：

You can add this to your css:

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

Adjust these values as needed. Also, reference these other sources: 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/

CodePudding user response：

set border-style: hidden; for table, thead, tbody, tr and then change your th, td padding and border to the desired total length and finally top: 0; for the sticky element. See below.

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