Сдвиг границы таблицы при добавлении абсолютно позиционированного псевдоэлемента к

Question

Есть таблица. Я добавляю через JS строки. К новым строкам через ::after добавляю крестик «Delete row»; псевдоэлемент абсолютно позиционирован, однако при первом добавлении новой строки происходит сдвиг границы таблицы. Не могу понять почему, ведь псевдоэлемент ::after абсолютно позиционирован и не должен влиять на отрисовку элементов.

const tbody = document.querySelector('tbody');

document.querySelector('button').addEventListener('click', event => {
  const tr = tbody.querySelector('tr:last-child').cloneNode(true);
  tbody.appendChild(tr);
});

table {
  border: 1px solid #000;
  border-spacing: 10px;
}

td {
  border: 1px solid #000;
  height: 50px;
  width: 50px;
}

tr:nth-child(n + 3) {
  position: relative;
}

tr:nth-child(n + 3)::after {
  color: #f00;
  content: '×';
  display: block;
  font-weight: bold;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 30%;
  right: -3%;
}

<table>
  <tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </tbody>
</table>
<br>
<button>Add row</button>

https://jsfiddle.net/0qhv5n3g

Answer 1

... псевдоэлемент ::after абсолютно позиционирован и не должен влиять на отрисовку элементов.

С обычными элементами это верно, но элементы таблицы могут вести себя по-другому. Например, тег <tr> создаёт для псевдоэлемента ещё одну ячейку (хотя её и не видно в DOM, но по тому, что отображается на странице, это именно так). Ну, а раз псевдоэлемент у Вас position: absolute, то и места он не занимает, но border-spacing по прежнему применяется даже к ячейке с нулевыми размерами.

С тегами <th> или <td> всё проще, поэтому рекомендую отталкиваться именно от них:

const tbody = document.querySelector('tbody');

document.querySelector('button').addEventListener('click', event => {
  const tr = tbody.querySelector('tr:last-child').cloneNode(true);
  tbody.appendChild(tr);
});

table {
  border-spacing: 10px;
  border: 1px solid #000;
}

td {
  height: 50px;
  width: 50px;
  border: 1px solid #000;
}

tr:nth-child(n + 3) {
  position: relative;
}

tr:nth-child(n + 3) td:last-child::after {
  content: 'x';
  position: absolute;
  top: 30%;
  right: -3%;
  display: block;
  height: 10px;
  width: 10px;
  font-weight: bold;
  color: #f00;
}

<table>
  <tbody>
    <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </tbody>
</table>
<br>
<button>Add row</button>

БЛОГ НА HUSL

Сдвиг границы таблицы при добавлении абсолютно позиционированного псевдоэлемента к

Ответы (1 шт):