Scrollable HTML table 行与行之间有空格

Question

我做了一个滚动 table。滚动时，您可以看到 header 中的行之间的 space。如何隐藏？

html

<div class="table-container">
   <table class="table">
      <thead class="table-head text-center text-white">
         <tr>
            <th colspan="1" style="width: 30%;">Text 6</th>
            <th colspan="1" style="width: 30%;">Text 7</th>
            <th colspan="1" style="width: 40%;">Text 6</th>
         </tr>
         <tr>
            <th colspan="1" style="width: 30%;">Text</th>
            <th colspan="1" style="width: 30%;">Text</th>
            <th colspan="1" style="width: 40%;">Text</th>
         </tr>
      </thead>
      <tbody class="body-half-screen">
         /.../
      </tbody>
   </table>
</div>

css

.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, .table td {
  border: 1px solid gray;
}

Answer 1

那是因为 border: 1px 在每个元素的盒子模型上增加了 1px。阅读更多：

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

一种解决方案是简单地使用 :not-选择器，它将边框添加到除 table 头部之外的所有所需元素。

如果您仍然想要边框，可以改用 outline: 1px;。

我在我的代码片段中删除了您的一些 HTML，因为字符太多。

.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 class="table-container">
  <table class="table">
    <thead class="table-head text-center text-white">
      <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 class="body-half-screen">
      <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>

Scrollable HTML table 行与行之间有空格

Scrollable HTML table has spaces between rows

html

css

scroll

html-table