pseudo-element inside table

Question

I wanted to insert a pseudo-element ::before in table-row. To get it out of the flow I use absolute positioning. But I get some unexpected results.

If I apply it to all the tr elements it works fine. But in the second example table.two it doesn't work like that. I am not able to get the pseudo-element out of the flow.

The only difference is that I target a subset.

I have no special design in mind. I just wanted to style the table row with a bit more flexibility. Maybe with some fancy box-shadow?

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>

Perhaps you could explain what this is supposed to look like? — Paulie_D, Jul 17 '15 at 10:22
I added a few lines to the code and the question to further explain the issue. Thanks for the tipp. — Type-Style, Jul 17 '15 at 10:47
This may help explain why this is not working http://stackoverflow.com/questions/8501727/table-row-wont-contain-elements-with-positionabsolute — Hidden Hobbes, Jul 17 '15 at 11:06

score 3 · Accepted Answer · edited May 23 '17 at 11:47

The issue is that you are positioning the pseudo elements relatively to the tr which leads to undefined behavior:

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).

Full credit to this answer https://stackoverflow.com/a/8502084/3400962 for finding this out.

This means you can't get the desired result by adding and positioning the pseudo element relatively to the tr.

To achieve the effect you are after, you can add and relatively position multiple pseudo elements to the td instead. The pseudo selectors first-child and last-child can be used to ensure that the box-shadow only applies to the ends of the 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>

score 0 · Answer 2 · answered Jul 17 '15 at 10:41

your problem isnt in targeting, but this happen when there are rows with this pseudo element only in whole table, dunno why O_o, but it has something to do with tr stretching and so

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>

pseudo-element inside table

2 Answers2