背景套印不工作表TR在Chrome

问题描述 投票：1回答：1

我有一个表，我显示了过度的tr但它不工作对铬，但它的工作在Firefox。

如何给背景过于上tr。我想下面的代码，但我正在对铬的问题。

我已经更新这两个浏览器。

在Firefox中我得到的输出enter image description here

在Chrome中，我得到的输出enter image description here

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

你能帮我在这？

html5 css3 google-chrome browser html-table
1个回答
2
投票

代替

 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.