如何在不同尺寸的每一行周围放置阴影？

Question

我有一个 table 似乎有不同大小的行。我想在每个蓝色边框周围放置一个阴影 box-shadow: 0 0 13px black。

简单地把阴影放在tr上显然不行:

我试过 td 上的阴影，但没有成功，主要是因为阴影在单元格之间流血。

有什么办法吗？

下面是我的代码。

<table>
    <tbody>
        <tr class="A">
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
        </tr>
        <tr class="B">
            <td></td><td>B2</td><td>B3</td><td>B4</td>
        </tr>
        <tr class="C">
            <td></td><td></td><td>C3</td><td>C4</td>
        </tr>
        <tr class="D">
            <td>D1</td><td>D2</td><td>D3</td><td>D4</td>
        </tr>
    </tbody>
</table>

table {
    border-collapse: separate;
    border-spacing: 0 20px;
    width: 300px;
    text-align: center;
}
tr {
    height: 40px;
    /* box-shadow: 0 0 13px black; */
}
td {
    border-top: 2px solid blue;
    border-bottom: 2px solid blue;
}
td:last-child {
    border-right: 2px solid blue;
}

.A td:nth-child(1) {border-left: 2px solid blue;}

.B td:nth-child(1) {border: none;}
.B td:nth-child(2) {border-left: 2px solid blue;}

.C td:nth-child(1) {border: none;}
.C td:nth-child(2) {border: none;}
.C td:nth-child(3) {border-left: 2px solid blue;}

.D td:nth-child(1) {border-left: 2px solid blue;}

Answer 1

您必须在 tr 元素上使用 CSS 滤镜属性来制作您想要的阴影。

CSS shadow on tr element

tr {filter: drop-shadow(5px 5px 5px #222222);}

Answer 2

我敢肯定，如果没有 javascript，您将无法做到这一点，因为您需要在行之间添加额外的元素。你可以这样做：

$("tr").each(function() {
  $("<div class='clearfix'></div>").insertBefore(this);
})

table, tr, td {
  box-sizing:border-box;
}
.clearfix:before, .clearfix:after {
  content: '.'; 
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
table {
  border:2px solid #0f0;
  padding:0 10px;
}
table tr {
  float:right;
  box-shadow:0px 0px 10px rgba(0,0,0,0.4);
  margin:10px 0;
}
table td {
  width:100px; 
  text-align:center;
  border:2px solid #f00;
}
table td:empty {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="A">
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
        </tr>
        <tr class="B">
            <td></td><td>B2</td><td>B3</td><td>B4</td>
        </tr>
        <tr class="C">
            <td></td><td></td><td>C3</td><td>C4</td>
        </tr>
        <tr class="D">
            <td>D1</td><td>D2</td><td>D3</td><td>D4</td>
        </tr>
    </tbody>
</table>

如何在不同尺寸的每一行周围放置阴影？

How to put a shadow around each row with different sizes?

css