0

Inside following example, I have table cells which have the CSS property opacity set to a value of 0.5. It seems like when I do not replace this property with certain specific CSS properties, it will cause problems:

table,
th,
td {
  border: 1px solid #000;
}

th {
  background-color: #ccc;
  position: sticky;
  top: 0;
}

td {
  /* Works: */
  /*background-color: rgba(204, 204, 204, 0.5);
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);*/
  /* Does nto work? */
  background-color: #ccc;
  opacity: 0.5;
}
<table>
  <thead>
    <tr>
      <th>
        Tuturu
      </th>
      <th>
        asdasdasd
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        asdasdas
      </td>
      <td>
        asdasdsa
      </td>
    </tr>
    <tr>
      <td>
        asdasdas
      </td>
      <td>
        asdasdsa
      </td>
    </tr>
    <tr>
      <td>
        asdasdas
      </td>
      <td>
        asdasdsa
      </td>
    </tr>
  </tbody>
</table>

<div style="height: 200px;">
</div>

If you start scrolling, the effect will be visible. The effect is pretty awesome, kind of ghost-ish like. (is that even a word?)

Still this is something not desirable.

As one might see, the table head looks transparent as well now.

I have been reading on MDN that:

Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

Am I required to use rgba() here instead of opacity? Or something else to solve the appearance of this example table?

Barrosy
  • 1,407
  • 2
  • 25
  • 56
  • z-index to sticky element (seaching the duplicate ..) – Temani Afif Jul 09 '19 at 14:18
  • 1
    Yes you should be using rgba(), opacity is the transparency of the entire element whilst rgba is the level of transparency of just the background/color – Dev Man Jul 09 '19 at 14:18
  • `opacity` make the whole element and it's contents partially transparent. RGBA on a background will make *just* the background (or border etc) partially transparent. They aren't the same. – Paulie_D Jul 09 '19 at 14:19
  • But why is `opacity` affecting the ``? – Barrosy Jul 09 '19 at 14:20
  • 1
    opacity change the stacking order of element when it's lower than 1 .. the td are now painted after the th. So add `z-index` to th – Temani Afif Jul 09 '19 at 14:21
  • Your CSS isn't impacting the `th` in any way. Your `td` is stacking ON TOP of the sticky header. – Bryce Howitson Jul 09 '19 at 15:41
  • You're right @BryceHowitson although a table structure shouldn't look different from how it looks now should it? Applying z-index solved the problem for me. – Barrosy Jul 10 '19 at 07:42
  • `position: sticky` removes the header from the common DOM Flow, therefore, making them stack as later elements (further down the page) are closer to the user. `z-index` fixes it because you're overriding the default stacking. – Bryce Howitson Jul 10 '19 at 16:46
  • If you ever wonder about how things stack, Chrome Dev Tools has a [3D DOM view](https://www.sencha.com/blog/hidden-gems-in-chrome-developer-tools/) that you can enable. – Bryce Howitson Jul 10 '19 at 16:50

0 Answers0