0

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

1
  • 2
    No, the td is a child of the tr, changing the opacity of the row will affect the cell as well. Sep 8, 2016 at 14:39

2 Answers 2

3

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>
      reshad
    </td>
  </tr>
</table>

3
  • I don't want to use rgba. Does this solution work with hex code as well?
    – ReshaD
    Sep 8, 2016 at 14:39
  • @reshad No, but there are tons of hex to rgb converters. Just find one in Google as I just did to translate your hex code. CSS preprocessors have functions that can, but I don't think you should use them just for that.
    – Sergio Tx
    Sep 8, 2016 at 14:41
  • 1
    Why don't you use rgba? @reshad .... you can get the values in 1 sec, with chrome developer tools or illustrator or any of the thousand web pages to convert.
    – DaniP
    Sep 8, 2016 at 14:43
0

No. td is a child of tr so if tr is transparent, so will be all of its content. (There's obviously no property like opacity: 2 to overcome initial opacity of the child).

You want to make the background transparent, or use transparent overlay with position: absolute; z-index: 1 that will stay over all contents of tr, and add z-index: 2 to td.

Not the answer you're looking for? Browse other questions tagged or ask your own question.