table 内的伪元素

Question

我想在table行中插入一个伪元素::before。为了让它脱离流程，我使用绝对定位。但是我得到了一些意想不到的结果。

如果我将它应用于所有 tr 元素，它就可以正常工作。但是在第二个例子中 table.two 它不是那样工作的。我无法从流中获取伪元素。

唯一的区别是我的目标是子集。

我没有特别设计的想法。我只是想更灵活地设置 table 行的样式。 也许有一些花哨的盒子阴影？

table {
     border: 1px solid black;
     width: 300px;
    }
    td { width: 33%; }
    
    /*  lets go */
    tr {
     position: relative; /*  reference point for pseudo elements */
    }
    tr.two::before, table.two tr::before {
     content: "test";
     color: red; background: rgba(255,200,0,0.7);
     position: absolute; top: 5%; left: 5%; bottom: 5%; right: 5%;
        z-index: -1;
        box-shadow: -1em 0 0.2em 0 rgba(255,200,0,0.4), 1em 0 0.2em 0 rgba(255,200,0,0.4);

    }

<table>
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr class="two">
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>
    
    <table class="two">
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>

Answer 1

你的问题不在于定位，但当整个 table 中只有包含此伪元素的行时会发生这种情况，不知道为什么 O_o，但它与 tr 有关] 拉伸等等

table {
     border: 1px solid black;
     width: 300px;
    }
    td {
     width: 33%; }
    
    /*  lets go */
    tr {
     position: relative; /*  reference point for pseudo elements */
    }
    table tr.two td, table.two tr td{
        width:25%;
    }
    tr.two::before, table.two tr::before {
     content: "test";
     color: red; background: rgba(255,255,255,0.7);
     position: absolute;
    }

<table>
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr class="two">
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>
    
    <table class="two">
      <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
     <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
      </tr>
    </table>

Answer 2

问题是您将伪元素相对于 tr 定位，这会导致未定义的行为：

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

(http://www.w3.org/TR/CSS2/visuren.html#propdef-position)。

找到这个答案完全归功于。

这意味着您无法通过相对于 tr 添加和定位伪元素来获得所需的结果。

要达到您想要的效果，您可以将多个伪元素添加并相对定位到 td。伪选择器 first-child 和 last-child 可用于确保 box-shadow 仅适用于 tr.

的末尾

table {
  border: 1px solid black;
  border-spacing: 0;
  width: 300px;
}
td {
  position: relative;
  width: 33%;
}
tr.two td::before,
table.two tr td::before {
  background: rgba(255, 200, 0, 0.7);
  bottom: 5%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 5%;
  z-index: -1;
}
tr.two td:first-child::before,
table.two tr td:first-child::before {
  box-shadow: -1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  color: red;
  content: "test";
  left: 5%;
}
tr.two td:last-child::before,
table.two tr td:last-child::before {
  box-shadow: 1em 0 0.2em 0 rgba(255, 200, 0, 0.4);
  right: 5%;
}

<table>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr class="two">
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
</table>

table 内的伪元素

pseudo-element inside table

html

css

html-table

pseudo-element