CODEWITHSUNDEEP
htmlcss
JoshG
JoshG

Reputation: 6745

Make sticky table header row completely opaque

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>

Upvotes: 4

Views: 1646

Answers (2)

biberman
biberman

Reputation: 5777

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>

Upvotes: 2

vals
vals

Reputation: 64244

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>

Upvotes: 3

Related Questions