html - 为什么固定位置表格在滚动时会移动边框的前 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;">
  <table style="border-spacing: 0px; 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>