是否可以在表格行中使用伪元素(:after，:before)?

问题描述

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

I want to add absolutely positioned element as an :after (of :before) of a table row.

看看这个:

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)认为它是某种表格单元格.

I assume that when I add such an element, the rendering engine (at least Webkit based) thinks it is a table cell of some kind.

:before 在所有浏览器中效果不佳.但是 :after 在 Firefox 中工作得很好，在 webkit 中几乎很好.在 webkit 中，它保留了一个很小的空间，并使整个表格的宽度变大.

:before works badly in all browsers. But :after works very well in Firefox and almost good in webkit. In webkit it keeps a small space and makes the whole table width bigger.

- 这就是 webkit 中困扰我的地方.

- This is what bothers me in webkit.

如何解决这个问题?我在哪里可以了解它为什么会发生?

How to fix this? And where can I read about why it is happening?

推荐答案

在这个例子中，你使用了 ::after 和 ::before 伪元素来在表格行之后或之前添加内容，这实质上会破坏表格布局并导致不可预测的结果.

In this example, you are using the ::after and ::before pseudo-elements to add content after or before a table row, which essentially will break the table layout and lead to unpredictable results.

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

If you were to add the generated content to a table-cell, the results would be more consistent.

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

There is not much to refer to except the original specification for generated content:

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

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

In addition, keep in mind that the CSS rendering engine generates anonymous boxes when creating tables:

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

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

However, since generated content is not part of the DOM, the whole table-rendering process probably cannot deal with the extra pseudo-element in a sensible way.

您正在深入研究一个没有明确规定的领域，任何支持都将是特定于浏览器的.

You are delving into an area that is not well specified and any support will be browser specific.

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

Depending on your layout requirements, you might need to use JavaScript or jQuery to alter the DOM of the table to the desired effect.

这篇关于是否可以在表格行中使用伪元素(:after，:before)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！