为什么固定位置表格在滚动时会移动边框的前 1 像素？

Question

在这个JSfiddle中你可以看到效果。向下滚动时，顶部边框移动 1 像素。我不知道如何阻止这一切。如果向右滚动，左边框也会执行相同的操作。我希望边界始终保持可见。我尝试添加“box-sizing: border-box;” 无济于事。我根本无法阻止这种行为。

https://jsfiddle.net/jqn7m0ta/

代码（来自上面的 JSfiddle）：

<div style="height:500px; margin-top:2rem; margin-bottom:2rem; overflow-x:scroll; overflow-y:scroll;">

  <table style="border:1px solid #e8e8e8; font-size:1rem; margin:0; padding:0; table-layout:fixed; width:100%;">

    <thead>

      <tr>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          a

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          b

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          c

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          d

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          e

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          f

        </th>

        <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">

          g

        </th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td style="background-color:#e8e8e8; height:1000px">1</td>

        <td style="height:1000px">2</td>

        <td style="background-color:#e8e8e8; height:1000px">3</td>

        <td style="height:1000px">4</td>

        <td style="background-color:#e8e8e8; height:1000px">5</td>

        <td style="height:1000px">6</td>

        <td style="background-color:#e8e8e8; height:1000px">7</td>

      </tr>

    </tbody>

  </table>

</div>

Answer 1

为什么要在表中应用边框，您可以做一件事：将边框应用到表的父元素，就像在您的情况下它是 DIV 元素一样。HTML Table 元素的默认 border-spacing:2px 因此您还需要将其修改为 0px。这是代码供您参考<div style="border:1px solid #e8e8e8; height:500px; margin-top:2rem; margin-bottom:2rem; overflow-x:scroll; overflow-y:scroll;">&nbsp; <table style="border-spacing: 0px; font-size:1rem; margin:0; padding:0; table-layout:fixed; width:100%;">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; &nbsp; <th style="background:#f9f9f9; color:#000; font-weight:bold; position:sticky; top:0; width:150px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; g&nbsp; &nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td style="background-color:#e8e8e8; height:1000px">1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="height:1000px">2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="background-color:#e8e8e8; height:1000px">3</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="height:1000px">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="background-color:#e8e8e8; height:1000px">5</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="height:1000px">6</td>&nbsp; &nbsp; &nbsp; &nbsp; <td style="background-color:#e8e8e8; height:1000px">7</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>

Answer 2

温馨提示：<table>我发现将 CSS 从 HTML 中分离出来后，处理起来就容易多了。将表示&nbsp;（CSS）和结构&nbsp;（HTML）以及行为&nbsp;（JS）分开绝对是一个很好的做法。进一步阅读：&nbsp;为什么将 CSS 与 HTML 分开很重要？四个步骤：删除边框并将<table>边框添加到父<div>级添加border-spacing: 0到<table>添加border: 2px solid #fff到所有<th>元素将border: 2px solid #fff&nbsp;和&nbsp;border-top: 0px;添加到所有<td>元素工作示例：body {&nbsp; overflow-y: hidden;}.container {&nbsp; position: relative;&nbsp; height: 500px;&nbsp; margin: 2rem 0;&nbsp; overflow-x: hidden;&nbsp; overflow-y: scroll;&nbsp; border: 1px solid #e8e8e8;}.container table {&nbsp; width: 100%;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font-size: 1rem;&nbsp; table-layout: fixed;&nbsp; border-spacing: 0;}.container table th {&nbsp; position: sticky;&nbsp; top: 0;&nbsp; width: 150px;&nbsp; height: 20px;&nbsp; color: #000;&nbsp; font-weight: bold;&nbsp; background-color: #f9f9f9;&nbsp; border: 2px solid #fff;}.container table td {&nbsp;height: 1000px;&nbsp;text-align: center;&nbsp;border: 2px solid #fff;&nbsp;border-top: 0px;}.container table td:nth-of-type(odd) {background-color: #e8e8e8;}<div class="container"><table><thead><tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th><th>g</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr></tbody></table></div>