I have a dynamically generated table:
IwouldliketocreateaclassinCSSthatwouldmakea"layer" overhead with transparency.
Example:
If I use background-color , it will only change the background, so it would have to be something over the top. Then it would not do.
The table code is basic, they are <tr> and <td> , so it makes no difference to post their code.
Option 1:
In this option you put a box-shadow: inset big in TR, and put position: relative in TD to be able to put z-index:-1 in them and play back of the shadow of TR. The intensity of box-shadow does not need to be border-collapse in table due to its framework.
.tab {
width: 100%;
}
.tab tr.ativa {
box-shadow: inset 0 0 0 1000px rgba(255,0,0,0.5);
}
.tab tr td {
padding: 10px;
position: relative;
z-index: -1;
}<table class="tab">
<tr>
<td>
<item>1</item>
</td>
<td>
<item>2</item>
</td>
<td>
<item>3</item>
</td>
<td>
<item>4</item>
</td>
</tr>
<tr class="ativa">
<td>
<item>a</item>
</td>
<td>
<item>s</item>
</td>
<td>
<item>d</item>
</td>
<td>
<item>f</item>
</td>
</tr>
<tr>
<td>
<item>a</item>
</td>
<td>
<item>s</item>
</td>
<td>
<item>d</item>
</td>
<td>
<item>f</item>
</td>
</tr>
</table>Option 2:
Solution and creating a ::after in tds and in hover in tr vc shows ::after . See that it is over content as you wanted.
.tab {
width: 100%;
border-collapse: collapse;
}
.tab td {
padding: 10px;
position: relative;
}
.tab tr:hover td::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
opacity: 0.5;
}
.tab tr.ativa td::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: red;
opacity: 0.5;
}<table class="tab">
<tr>
<td>
<item>1</item>
</td>
<td>
<item>2</item>
</td>
<td>
<item>3</item>
</td>
<td>
<item>4</item>
</td>
</tr>
<tr class="ativa">
<td>
<item>a</item>
</td>
<td>
<item>s</item>
</td>
<td>
<item>d</item>
</td>
<td>
<item>f</item>
</td>
</tr>
<tr>
<td>
<item>a</item>
</td>
<td>
<item>s</item>
</td>
<td>
<item>d</item>
</td>
<td>
<item>f</item>
</td>
</tr>
</table>I think this way it can help you. And it's quite simple:
table, th, td {
border: 1px solid black;
padding: 5px 10px;
}
table{
background: #e0e0e0;
}
td{
border:none;
}
.red {
background: red;
opacity: .5;
}<table cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td> Nº</td>
<td> HORA</td>
<td> Placa</td>
<td> Tipo</td>
<td> Tara</td>
</tr>
<tr class="red">
<td> Nº</td>
<td> HORA</td>
<td> Placa</td>
<td> Tipo</td>
<td> Tara</td>
</tr>
<tr>
<td> Nº</td>
<td> HORA</td>
<td> Placa</td>
<td> Tipo</td>
<td> Tara</td>
</tr>
</tbody>
</table> You can create any element (a div for example) within TD to do this:
td {
border: solid 1px;
padding: 4px;
text-align: center;
position: relative
}
.tarja {
position: absolute;
width: 80%;
height: 10px;
left: 10% ;
margin: -12px 0 0 0;
background-color: #000;
opacity: 0.8
}<table>
<tr>
<td>texto qualquer</td>
<td>
texto qualquer
<div class="tarja"></div>
</td>
<td>texto qualquer</td>
</tr>
</table> I used position in TD and div to make it easier to position within TD , hence you can use the size in percentage and facilitate placement.