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

I have a table that appears to have rows with different sizes. I would like to place a shadow box-shadow: 0 0 13px black around each blue border.

Simply putting the shadow on tr obviously doesn't do it:

I have tried to play with the shadow on td but without success, mostly because the shadow bleeds between cells.

Any ways to do that?

My code below.

<table>
    <tbody>
        <tr >
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
        </tr>
        <tr >
            <td></td><td>B2</td><td>B3</td><td>B4</td>
        </tr>
        <tr >
            <td></td><td></td><td>C3</td><td>C4</td>
        </tr>
        <tr >
            <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;}

CodePudding user response：

You have to use the CSS filter property on the tr element to make shadows as you wanted.

CSS shadow on tr element

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

CodePudding user response：

Im pretty sure you can't do it without javascript because you need extra element between rows. You can do it like this:

$("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 >
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
        </tr>
        <tr >
            <td></td><td>B2</td><td>B3</td><td>B4</td>
        </tr>
        <tr >
            <td></td><td></td><td>C3</td><td>C4</td>
        </tr>
        <tr >
            <td>D1</td><td>D2</td><td>D3</td><td>D4</td>
        </tr>
    </tbody>
</table>