Table with sticker headers: Scrolling hides the border-top and border-bottom of the table headers

Question

I have the following example: https://plnkr.co/edit/05Hef47dumxZopRT

Initial the table looks ok, but when the table gets scrolled vertically, the border of the header cells gets hidden.

The header cells are styled with this class:

    .fixed_headers thead th {
      position: sticky;
      position: -webkit-sticky;
      top: 0;  /* REQUIRED: https://stackoverflow.com/a/43707215 */
      background-color: #efefef;
      z-index: 10;
      border: 1px solid #ccc;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background-clip: padding-box;
    }

How is it possible that the header cell's borders will be displayed if it the table will be scrolled?

score -1 · Answer 1 · answered Jan 08 '21 at 14:16

You can reset the top coordonate and add a box-shadow to blend with the table border or overlay the background while scrolling:

possible update:

.fixed_headers thead th {
          position: sticky;
          top: 1px;  /* REQUIRED: https://stackoverflow.com/a/43707215 */
          background-color: #efefef;
          z-index: 10;
          border: 1px solid #ccc; 
            box-shadow:0 -1px #ccc;
        }

demo snippet below:

html * {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.responsive-table-container {
  height: 300px;
  width: 800px;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

.fixed_headers {
  width: 100%;
}

.fixed_headers thead tr {
  position: relative;
}

.fixed_headers td,
.fixed_headers thead th {
  padding: 5px;
  text-align: left;
  white-space: nowrap;
}

.fixed_headers tbody tr:nth-child(even) {
  background-color: #f7f7f7;
  color: #000;
}

.fixed_headers thead th {
  position: sticky;
  top: 1px;
  /* REQUIRED: https://stackoverflow.com/a/43707215 */
  background-color: #efefef;
  z-index: 10;
  border: 1px solid #ccc;
  box-shadow: 0 -1px #ccc ,  0 1px #ccc;
}

tbody td {
  border: 1px solid #ccc;

<div class="responsive-table-container">
  <table class="fixed_headers">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
        <th>Column 13</th>
        <th>Column 14</th>
        <th>Column 15</th>
        <th>Column 16</th>
        <th>Column 17</th>
        <th>Column 18</th>
        <th>Column 19</th>
        <th>Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>
      <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>Value 3</td>
        <td>Value 4</td>
        <td>Value 5</td>
        <td>Value 6</td>
        <td>Value 7</td>
        <td>Value 8</td>
        <td>Value 9</td>
        <td>Value 10</td>
        <td>Value 11</td>
        <td>Value 12</td>
        <td>Value 13</td>
        <td>Value 14</td>
        <td>Value 15</td>
        <td>Value 16</td>
        <td>Value 17</td>
        <td>Value 18</td>
        <td>Value 19</td>
        <td>Value 20</td>
      </tr>


    </tbody>
  </table>
</div>

Table with sticker headers: Scrolling hides the border-top and border-bottom of the table headers

1 Answers1