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

是否可以在表格行中使用伪元素(: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.