Question

我有一张桌子，我在tr上显示了一个表格，但它不适用于chrome，但适用于Firefox。

如何为tr设置背景。我尝试了下面的代码，但在chrome上遇到了问题。

我同时更新了两个浏览器。

在Firefox中，我得到了输出

在chrome中，我得到了输出

<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>

您能帮我吗？

Answer 1

代替

 tr.sec_activities {
     position: relative;
 }

更改到位置：绝对； 。

 tr.sec_activities {
     position: absolute;
 }

这应该解决它并使两个浏览器的输出相同。

代码段：

<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>

背景颜色在Chrome中的表格tr上无法正常工作

1 个答案: