reshad reshad - 3 months ago 7
CSS Question

Force the inside td not to behave like tr

I have a

tr
with
opacity: 0.1
, the
td
inside of it naturally will respect this
opacity
and will be transparent.
I wanted to know if there is a way to force the
td
not to respect the style of
tr
and have
opacity: 1.0
.



tr {
background: #e56a54;
width: 100px;
opacity: 0.1;
}
td {
opacity: 1.0;
font-size: 40px;
color: green;
}

<table>
<tr>
<td>
reshad
</td>
</tr>
</table>





jsFiddle

Answer

I think the best way is to apply opacity to the background of the TR and leave the TD.

From W3schools:

When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below). http://www.w3schools.com/cssref/css3_pr_opacity.asp

tr {
  background: rgba(229, 106, 84, 0.1);
  width: 100px;
}
td {
  font-size: 40px;
  color: green;
}
<table>
  <tr>
    <td> // I want this to have opacity: 1.0 and not 0.1
      reshad
    </td>
  </tr>
</table>