Make sticky table header row completely opaque

user_927172 0
Viewed 350

I have a table with a sticky header row. All table cells have a border with border-radius. Because of this border, when you scroll vertically, you can see the borders of the other cells overlap with the header row.

For example, in the snippet below, when you scroll you can see the black border of the tbody cells peeking "behind" the top of the thead cells.

Is there any way to make the header row completely opaque so that when you scroll, any overlapping elements are hidden?

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>

css html
2 Answers

You can set a shadow around the th elements, it will do the job.

I have set it to yellow to make it more visible, of course you can set it to white

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  background-color: #00aeef;
  border-radius: 5px;
  box-shadow: 10px -6px 0px 6px yellow, -4px -6px 0px 6px yellow;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>

user_19263690

Use box-shadow arround it, so the 'tr's disappear in the cellspacing and not directly under the blue 'th's:

th {
    box-shadow: 5px 5px white, -5px 5px white, -5px -5px white, 5px -5px white;
    background-color: #00aeef;
    border-radius: 5px;
}

Working example: 

.table-wrapper {
  height: 90px;
  overflow: scroll;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

td,
th {
  width: 50px;
}

th {
  box-shadow: 5px 5px white, -5px 5px white, -5px -5px white, 5px -5px white;
  background-color: #00aeef;
  border-radius: 5px;
}

td {
  border-radius: 5px;
  border: 5px solid black;
}

thead>tr>th {
  top: 0;
  position: sticky;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
        <td>Col6</td>
        <td>Col7</td>
        <td>Col8</td>
        <td>Col9</td>
      </tr>
    </tbody>
  </table>
</div>

user_153773550
Related