Force the inside td not to behave like tr

Question

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

No, the `td` is a child of the `tr`, changing the opacity of the row will affect the cell as well. — GreyRoofPigeon, Sep 08 '16 at 14:39

Sergio Tx · Accepted Answer · 2017-06-26T09:46:01.177

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>

edited Jun 26 '17 at 09:46

answered Sep 08 '16 at 14:38

Sergio Tx

3,706
1
16
29

I don't want to use rgba. Does this solution work with hex code as well? – ReshaD Sep 08 '16 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 08 '16 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 08 '16 at 14:43

score 0 · Answer 2 · answered Sep 08 '16 at 14:39

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.

Force the inside td not to behave like tr

2 Answers2