Scrollable HTML table has spaces between rows-CodePudding

I made a scrolling table. When scrolling, you can see the space between the lines in the header. How to hide it?

CodePudding user response：

That's because border: 1px adds 1px on each element's box model. Read more:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

One solution is simply to use the :not-selector, which adds the border to all your desired elements besides the table head.

If you still want a border, you could use outline: 1px; instead.

I edited out some of your HTML in my snippet as there were too many characters.

.table-container {
  width: 100%;
  overflow: auto;
  height: 50vh;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table-head {
  vertical-align: middle;
  position: -webkit-sticky;
  position: sticky;
  will-change: transform;
  top: 0;
  z-index: 2;
  background-color: gray;
}

.table th:not(.table thead tr th),
.table td {
  border: 1px solid gray;
}

<div >
  <table >
    <thead >
      <tr>
        <th colspan="1" style="width: 3.45%;">Text 6</th>
        <th colspan="1" style="width: 3.45%;">Text 7</th>
        <th colspan="1" style="width: 3.45%;">Text 6</th>
        <th colspan="1" style="width: 3.45%;">Text 8</th>
        <th colspan="1" style="width: 3.45%;">Text 7</th>
        <th colspan="1" style="width: 3.45%;">Text 4</th>
        <th colspan="1" style="width: 3.45%;">Text 0</th>
        <th colspan="1" style="width: 3.45%;">Text 9</th>
        <th colspan="1" style="width: 3.45%;">Text 6</th>
        <th colspan="1" style="width: 3.45%;">Text 4</th>
        <th colspan="1" style="width: 3.45%;">Text 4</th>
        <th colspan="1" style="width: 3.45%;">Text 6</th>
        <th colspan="1" style="width: 3.45%;">Text 9</th>
        <th colspan="1" style="width: 3.45%;">Text 9</th>
        <th colspan="1" style="width: 3.45%;">Text 2</th>
        <th colspan="1" style="width: 3.45%;">Text 9</th>
        <th colspan="1" style="width: 3.45%;">Text 1</th>
        <th colspan="1" style="width: 3.45%;">Text 5</th>
        <th colspan="1" style="width: 3.45%;">Text 0</th>
        <th colspan="1" style="width: 3.45%;">Text 7</th>
        <th colspan="1" style="width: 3.45%;">Text 5</th>
        <th colspan="1" style="width: 3.45%;">Text 1</th>
        <th colspan="1" style="width: 3.45%;">Text 3</th>
        <th colspan="1" style="width: 3.45%;">Text 7</th>
        <th colspan="1" style="width: 3.45%;">Text 0</th>
        <th colspan="1" style="width: 3.45%;">Text 0</th>
        <th colspan="1" style="width: 3.45%;">Text 7</th>
        <th colspan="1" style="width: 3.45%;">Text 6</th>
        <th colspan="1" style="width: 3.45%;">Text 0</th>
      </tr>
      <tr>
        <th colspan="1" style="width: 3.45%;">Text</th>
        <th colspan="1" style="width: 3.45%;">Text</th>
        <th colspan="1" style="width: 3.45%;">Text</th>
        <th colspan="1" style="width: 3.45%;">Text</th>
        <th colspan="1" style="width: 3.45%;">Text</th>
        <th colspan="1" style="width: 3.45%;">0</th>
        <th colspan="1" style="width: 3.45%;">1</th>
        <th colspan="1" style="width: 3.45%;">2</th>
        <th colspan="1" style="width: 3.45%;">3</th>
        <th colspan="1" style="width: 3.45%;">4</th>
        <th colspan="1" style="width: 3.45%;">5</th>
        <th colspan="1" style="width: 3.45%;">6</th>
        <th colspan="1" style="width: 3.45%;">7</th>
        <th colspan="1" style="width: 3.45%;">8</th>
        <th colspan="1" style="width: 3.45%;">9</th>
        <th colspan="1" style="width: 3.45%;">10</th>
        <th colspan="1" style="width: 3.45%;">11</th>
        <th colspan="1" style="width: 3.45%;">12</th>
        <th colspan="1" style="width: 3.45%;">13</th>
        <th colspan="1" style="width: 3.45%;">14</th>
        <th colspan="1" style="width: 3.45%;">15</th>
        <th colspan="1" style="width: 3.45%;">16</th>
        <th colspan="1" style="width: 3.45%;">17</th>
        <th colspan="1" style="width: 3.45%;">18</th>
        <th colspan="1" style="width: 3.45%;">19</th>
        <th colspan="1" style="width: 3.45%;">20</th>
        <th colspan="1" style="width: 3.45%;">21</th>
        <th colspan="1" style="width: 3.45%;">22</th>
        <th colspan="1" style="width: 3.45%;">23</th>
      </tr>
    </thead>
    <tbody >
      <tr>
        <td>Text1</td>
        <td>Text</td>
        <td>Text</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Text1</td>
        <td>Text</td>
        <td>Text</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Text1</td>
        <td>Text-2</td>
        <td>Text</td>
        <td>0.9</td>
        <td>2.3</td>
        <td>1.3108</td>
        <td>1.3064</td>
        <td>1.2994</td>
        <td>1.2975</td>
        <td>1.2878</td>
        <td>1.2831</td>
        <td>1.2953</td>
        <td>1.2975</td>
        <td>1.3006</td>
        <td>1.2994</td>
        <td>1.3106</td>
        <td>1.3131</td>
        <td>1.2917</td>
        <td>1.295</td>
        <td>1.3011</td>
        <td>1.3067</td>
        <td>1.3106</td>
        <td>1.3053</td>
        <td>1.2936</td>
        <td>1.3047</td>
        <td>1.2892</td>
        <td>1.2886</td>
        <td>1.3</td>
        <td>1.2997</td>
      </tr>
      <tr>
        <td>Text1</td>
        <td>Text-2</td>
        <td>Text</td>
        <td>0.9</td>
        <td>2.1</td>
        <td>0.2736</td>
        <td>0.3306</td>
        <td>0.6361</td>
        <td>1.0711</td>
        <td>1.2467</td>
        <td>1.2428</td>
        <td>1.2542</td>
        <td>1.2542</td>
        <td>1.2533</td>
        <td>1.2547</td>
        <td>1.2653</td>
        <td>1.2664</td>
        <td>1.2494</td>
        <td>1.2483</td>
        <td>1.2567</td>
        <td>1.2583</td>
        <td>1.2633</td>
        <td>1.2614</td>
        <td>1.2486</td>
        <td>1.2539</td>
        <td>1.2439</td>
        <td>1.2419</td>
        <td>1.2594</td>
        <td>1.2836</td>
      </tr>
      <tr>
        <td>Text29</td>
        <td>Text-2</td>
        <td>Text</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Text30</td>
        <td>Text</td>
        <td>Text</td>
        <td>2.5</td>
        <td>3.5</td>
        <td>3.2528</td>
        <td>3.2431</td>
        <td>3.245</td>
        <td>3.2483</td>
        <td>3.2439</td>
        <td>3.2453</td>
        <td>3.245</td>
        <td>3.2453</td>
        <td>3.2397</td>
        <td>3.2483</td>
        <td>3.2339</td>
        <td>3.2375</td>
        <td>3.2406</td>
        <td>3.2667</td>
        <td>3.2697</td>
        <td>3.2597</td>
        <td>3.2531</td>
        <td>3.2478</td>
        <td>3.24</td>
        <td>3.2436</td>
        <td>3.2428</td>
        <td>3.2378</td>
        <td>3.2406</td>
        <td>3.2408</td>
      </tr>
      <tr>
        <td>Text30</td>
        <td>Text</td>
        <td>Text</td>
        <td>2.5</td>
        <td>3.5</td>
        <td>3.3397</td>
        <td>3.2983</td>
        <td>3.3131</td>
        <td>3.2939</td>
        <td>3.3289</td>
        <td>3.3128</td>
        <td>3.3008</td>
        <td>3.3017</td>
        <td>3.3372</td>
        <td>3.315</td>
        <td>3.3328</td>
        <td>3.3336</td>
        <td>3.335</td>
        <td>3.3439</td>
        <td>3.3428</td>
        <td>3.3222</td>
        <td>3.3278</td>
        <td>3.2964</td>
        <td>3.2928</td>
        <td>3.3125</td>
        <td>3.3161</td>
        <td>3.3097</td>
        <td>3.3347</td>
        <td>3.3233</td>
      </tr>
      <tr>
        <td>Text56</td>
        <td>Text</td>
        <td>Text</td>
        <td>1</td>
        <td>2.5</td>
        <td>1.3403</td>
        <td>1.3469</td>
        <td>1.3547</td>
        <td>1.3139</td>
        <td>1.3225</td>
        <td>1.3497</td>
        <td>1.3811</td>
        <td>1.3803</td>
        <td>1.3678</td>
        <td>1.3531</td>
        <td>1.4214</td>
        <td>1.3647</td>
        <td>1.3717</td>
        <td>1.3836</td>
        <td>1.3581</td>
        <td>1.3831</td>
        <td>1.3839</td>
        <td>1.4011</td>
        <td>1.3919</td>
        <td>1.3608</td>
        <td>1.3428</td>
        <td>1.3769</td>
        <td>1.3717</td>
        <td>1.3503</td>
      </tr>
      <tr>
        <td>Text56</td>
        <td>Text</td>
        <td>Text</td>
        <td>1.5</td>
        <td>2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Text57</td>
        <td>Text</td>
        <td>Text</td>
        <td>2</td>
        <td>3.3</td>
        <td>2.4417</td>
        <td>2.4364</td>
        <td>2.4383</td>
        <td>2.4236</td>
        <td>2.4439</td>
        <td>2.4453</td>
        <td>2.4322</td>
        <td>2.4778</td>
        <td>2.4569</td>
        <td>2.4531</td>
        <td>2.4728</td>
        <td>2.4492</td>
        <td>2.4019</td>
        <td>2.4206</td>
        <td>2.4372</td>
        <td>2.4364</td>
        <td>2.4475</td>
        <td>2.435</td>
        <td>2.4336</td>
        <td>2.4481</td>
        <td>2.4364</td>
        <td>2.4383</td>
        <td>2.4386</td>
        <td>2.4361</td>
      </tr>
    </tbody>
  </table>
</div>