html - pseudo-element inside table -

i wanted insert pseudo-element ::before in table-row. out of flow use absolute positioning. unexpected results.

if apply tr elements works fine. in second example table.two doesn't work that. not able pseudo-element out of flow.

the difference target subset.

i have no special design in mind. wanted style table row bit more flexibility. maybe fancy box-shadow?

table {      	border: 1px solid black;      	width: 300px;      }      td {	width: 33%; }            /*  lets go */      tr {      	position: relative; /*  reference point 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>

the issue positioning pseudo elements relatively tr leads 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, , table-caption elements undefined.

(http://www.w3.org/tr/css2/visuren.html#propdef-position).

full credit answer https://stackoverflow.com/a/8502084/3400962 finding out.

this means can't desired result adding , positioning pseudo element relatively tr.

to achieve effect after, can add , relatively position multiple pseudo elements td instead. pseudo selectors first-child , last-child can used ensure box-shadow applies ends of 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>