Почему таблица с фиксированным положением перемещает первые 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 Элемент таблицы имеет рамку по умолчанию -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; для всех <th> элементов

---

Пример работы:

.container {
  position: relative;
  height: 500px;
  margin: 2rem 0;
  overflow: 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>