在某些表列上应用框形阴影

Question

我试图在html表的某些列组上放置一些框影,但我在每个上都得到了框影的覆盖。（在我的上下文中，我不能拆表）

html：

<table>
  <tr>
    <td>test</td>
    <td>test</td>
    <td class="transparent"></td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td class="transparent"></td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td class="transparent"></td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

css：

table {
  margin: 50px;
  border-collapse: collapse;
}
td:not(.transparent) {
  padding: 2em;
  box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td.transparent {
  padding: 1em;
}

实际外观：

想要的表情：

Answer 1

这是一种黑客，但它的结果类似于你想要的。

我为每个TD添加了span。

逻辑是有一个:before元素，用白色(background)覆盖内部的td空间。span意味着将文本提前一层。

所以层是

• 影子(td)z-index:0
  • 白色封面(:before)Z-index:1
    • 文本(span)z-index:2

    null

    table {
      margin: 50px;
      border-collapse: collapse;
    }
    
    td {
      padding: 2em;
      position: relative;
    }
    
    td:not(.transparent) {
      box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
    }
    
    td:not(.transparent):before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 1;
    }
    
    td:not(.transparent) span {
      position: relative;
      z-index: 2;
    }
    
    td.transparent {
      padding: 1em;
    }

    <table>
      <tr>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td class="transparent"></td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td class="transparent"></td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
      </tr>
      <tr>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td class="transparent"></td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
        <td>
          <span>test</span>
        </td>
      </tr>
    </table>