Pseudo-element inside a table
I wanted to insert the :: before pseudo-element into a row-table . To get it out of the stream, I am using absolute positioning. But I am getting unexpected results.
If I apply it to all tr elements it works fine. But in the second example table.two it doesn't work. I cannot get the pseudo element from the stream.
The only difference is that I am targeting a subset .
I have no special design. I just wanted to style the table row with more flexibility. Maybe with some kind of fancy 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>
source to share
The problem is that you are positioning pseudo elements relatively tr
, which leads to undefined behavior:
The effect "position: relative" on the group table-row, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell and table Record elements are undefined.
( http://www.w3.org/TR/CSS2/visuren.html#propdef-position ).
Full credit to this answer to fooobar.com/questions/371024 / ... for figuring it out.
This means that you cannot get the desired result by adding and positioning the pseudo element relatively tr
.
To achieve the effect you are using, you can add and relatively position multiple pseudo-elements in td
. Pseudo-elements first-child
and last-child
can be used to ensure that box-shadow
only applies to ends 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>
source to share
Your problem is not targeting, but it happens when rows with this pseudo-element only occur in whole tables, not why O_o, but it has something to do with stretching tr
and therefore
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>
source to share