CSS ::Before on Table Cell
I want to add a ::before
selector on some table cells what has a position:absolute
, but it fails:
table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }
.useBefore::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
I noticed that if I add the ::before
to all of the tr
's then it works:
table开发者_如何转开发{
border:1px solid #ccc;
padding:10px;
}
table td{
border:1px solid #ccc;
padding:5px;
}
tr::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
But this is not what I want, because I want to add it only on some of them.
I'm not sure why it fails exactly, but you could add it on the first table cell instead.
.useBefore td:first-child:before{
content:'before';
position:absolute;
}
精彩评论