Css 如何在每一行周围放置不同大小的阴影

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

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

我曾try 在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;}