11

我想将绝对定位的元素添加为表格行的:after(of :before)。

看这个： 

table {
  border: 1px dotted gray;
  border-collapse: collapse;
  border-spacing: 0;
  td {
    padding: 0;
    margin: 0;
    width: 100px;
    background: rgba(255, 0, 0, 0.2)
  }
}

table.a .special::before {
  content: 'a';
}

table.b .special::before {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.c .special::after {
  content: 'a';
  display: block;
  position: absolute;
  right: 10px;
}

table.d .special .after {
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="a">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="b">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br/>
<table class="c">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<Br/>
<table class="d">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr class='special'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <div class='after'>a</div>
  </tr>
</table>

我假设当我添加这样一个元素时，渲染引擎（至少基于 Webkit）认为它是某种表格单元格。

:before在所有浏览器中都无法正常工作。但:after在 Firefox 中运行良好，在 webkit 中几乎很好。在 webkit 中，它保留了一个小空间，并使整个表格的宽度更大。

在此处输入图像描述- 这就是 webkit 中困扰我的地方。

如何解决这个问题？我在哪里可以了解它发生的原因？

4

2 回答 2

13

在此示例中，您使用::afterand::before伪元素在表格行之后或之前添加内容，这实际上会破坏表格布局并导致不可预测的结果。

如果您要将生成的内容添加到表格单元格，结果会更加一致。

除了生成内容的原始规范外，没有太多可参考的：

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

另外，请记住，CSS 渲染引擎在创建表格时会生成匿名框：

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

但是，由于生成的内容不是 DOM 的一部分，整个表格渲染过程可能无法以合理的方式处理额外的伪元素。

您正在钻研一个没有明确指定的领域，任何支持都将是特定于浏览器的。

根据您的布局要求，您可能需要使用 JavaScript 或 jQuery 将表格的 DOM 更改为所需的效果。

于 2013-10-25T12:00:57.307 回答
2

使用第一个表格单元格而不是行作为绝对定位伪元素的宿主。

row > td:first-child::before {
  content: '';
  position: absolute;
  .
  .
}
于 2020-11-12T11:48:07.827 回答