Background-color overly not working on table tr in the chrome

Question

I have a table and I am displaying the overly on tr but it's not working on chrome but it's working on firefox.

How to give the background overly on tr. I tried below code but I am getting the issue on chrome.

I have both browsers updated.

In Firefox I am getting the output

In chrome, I am getting the output

<html>

<head>

  <style>
    tr.sec_activities {
      position: relative;
    }
    
    tr.sec_activities:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>adasd</th>
        <th>asdasd</th>
        <th>asdasd</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>

      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>

    </tbody>
  </table>



</body>

</html>

Would you help me out in this?

@AjaiKrishnanR, Oh!.. I added now. by mistake I, removed my code. added again. — user9437856, Feb 05 '19 at 10:12
Possible duplicate of [Table row won't contain elements with position:absolute](https://stackoverflow.com/questions/8501727/table-row-wont-contain-elements-with-positionabsolute) — James Coyle, Feb 05 '19 at 10:27
From the linked question: The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. — James Coyle, Feb 05 '19 at 10:28
@JamesCoyle, If I remove the 'position: relative' then I am getting overly on the full browser. — user9437856, Feb 05 '19 at 10:30
Yes. You cannot rely on position relative on table elements as the behavior is undefined. Thats why its not working in all browsers. You need to come up with a different approach. — James Coyle, Feb 05 '19 at 10:32
Yes, I have to check with other solution but accepted answer is not working in the duplicate link and I don't want to add the css with TD — user9437856, Feb 05 '19 at 10:33

Ajai Krishnan R · Answer 1 · 2019-02-05T11:28:39.070

2

instead of

 tr.sec_activities {
     position: relative;
 }

change it to position: absolute;.

 tr.sec_activities {
     position: absolute;
 }

this should solve it and make both the browser's output same.

Snippet:

<html>

<head>

  <style>
    tr.sec_activities {
      position: absolute;
    }
    
    tr.sec_activities:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0.6);
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>adasd</th>
        <th>asdasd</th>
        <th>asdasd</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sec_activities">
        <td>sadsadasdad</td>
        <td>dsfsfs</td>
        <td>ajsdkaskdjajd</td>
        <td>adklasdlja</td>
      </tr>
    </tbody>
  </table>



</body>

</html>

edited Feb 05 '19 at 11:28

answered Feb 05 '19 at 10:44

Ajai Krishnan R

135
1
14

Give me some time to check this. – user9437856 Feb 05 '19 at 10:47
@user9437856 did u gave a try ? any luck ? – Ajai Krishnan R Feb 05 '19 at 11:16
If I try tr.sec_activities { position: absolute;} then tr will not display proper. It's changing the all position. – user9437856 Feb 05 '19 at 11:18
@user9437856 added snippet.. please chk in chrome, it works the same way as in firefox. – Ajai Krishnan R Feb 05 '19 at 11:26
@user9437856 This works fine for me, and I'm on Google Chrome – Devealte Feb 05 '19 at 11:27
@Devealte, Which code you tried? My code or Ajai answer? – user9437856 Feb 05 '19 at 11:30
@user9437856 I tried Ajai's answer, I also checked yours, but it doesn't work. – Devealte Feb 05 '19 at 11:30
ok. Try to add more than one tr and check the output. I know I added only one tr in the question. – user9437856 Feb 05 '19 at 11:32
1

@user9437856 Added another tr (In my own .html file), works fine again, so it should work for him too. – Devealte Feb 05 '19 at 11:35
@user9437856 Sure, I'll take a screenshot of it – Devealte Feb 06 '19 at 00:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187960/discussion-between-devealte-and-user9437856). – Devealte Feb 06 '19 at 00:18

Background-color overly not working on table tr in the chrome

1 Answers1