主页 / 问题 / 1350357
Accepted
Roman Grinyov
Asked:2022-04-16 16:55:26 +0000 UTC2022-04-16 16:55:26 +0000 UTC

将绝对定位的伪元素添加到 <tr> 时移动表格边框

  • 772

这里有张桌子。我正在通过 JS 添加字符串。通过::after我添加一个交叉“删除行”的新行；伪元素是绝对定位的，但是第一次添加新行时，表格边框会移动。我不明白为什么，因为伪元素::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

javascript

1 个回答

  1. Best Answer

    ...伪元素::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>

    • 2

相关问题