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

Question

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.


    
        
            A1 A2 A3 A4
        
        
            B2 B3 B4
        
        
            C3 C4
        
        
            D1 D2 D3 D4

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

user_5810290 · Answer

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);}

user_19239198 · Answer

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() {
  $("").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;
}



    
        
            A1 A2 A3 A4
        
        
            B2 B3 B4
        
        
            C3 C4
        
        
            D1 D2 D3 D4

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

2 Answers