为什么固定位置表格在滚动时会移动边框的前 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>

Answer 2

温馨提示：<table>我发现将 CSS 从 HTML 中分离出来后，处理起来就容易多了。将表示 （CSS）和结构 （HTML）以及行为 （JS）分开绝对是一个很好的做法。

进一步阅读： 为什么将 CSS 与 HTML 分开很重要？

---

四个步骤：

1. 删除边框并将<table>边框添加到父<div>级

2. 添加border-spacing: 0到<table>

3. 添加border: 2px solid #fff到所有<th>元素

4. 将border: 2px solid #fff 和 border-top: 0px;添加到所有<td>元素

---

工作示例：

body {

  overflow-y: hidden;

}

.container {

  position: relative;

  height: 500px;

  margin: 2rem 0;

  overflow-x: hidden;

  overflow-y: scroll;

  border: 1px solid #e8e8e8;

}

.container table {

  width: 100%;

  margin: 0;

  padding: 0;

  font-size: 1rem;

  table-layout: fixed;

  border-spacing: 0;

}

.container table th {

  position: sticky;

  top: 0;

  width: 150px;

  height: 20px;

  color: #000;

  font-weight: bold;

  background-color: #f9f9f9;

  border: 2px solid #fff;

}

.container table td {

 height: 1000px;

 text-align: center;

 border: 2px solid #fff;

 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>