Problem

The code below results in a line between the tds in the table. But the clip-path value set at 0px should theoretically remove everything outside the tds. How do I get rid of them?

EDIT: The shadow has to be on the TD element. That's because I have multiple TRs that are both sortable and expandable (via a hidden TD at the end of each TR). I want a box-shadow on all those rows, but you cannot apply rounded corners to a TR, only to TDs. So I have to apply both the rounded corners and the box-shadow at the TD level.

Note

This builds on the clip-path solution from this question, but as this bug is a separate issue, I have created a new question.

table {
    padding: 20px;
    border-spacing: 0px;
    }

td {
    padding: 30px;
    background-color: #FFC300;
    }
    
td:first-child { 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(-15px 0px -15px -15px);
    }
    
td:last-child { 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(-15px -15px -15px 0px);
    }
    
td:not(td:first-child):not(td:last-child) {
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(-15px 0px -15px 0px);
    }

<table>
<tr>
<td>To the right is a line that should not be there</td>
<td>It's getting worse, here it is on both sides</td>
<td>Please, just go away</td>
</tr>
</table>

This the result:

Result of the code shown here

CodePudding user response：

Would something like this work for your purpose? I'm using a drop-shadow filter instead of box-shadow and applying at the table level instead of the children.

table {
  padding: 20px;
  border-spacing: 0;
}

tr {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.8));
}

td {
  padding: 30px;
  background-color: #FFC300;
}

td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<table>
  <tr>
    <td>no space here</td>
    <td>just yellow</td>
    <td>all yellow</td>
    <td>so much yellow</td>
    <td>wow</td>
  </tr>
</table>

CodePudding user response：

Try masking using the ::before and ::after pseudo-elements.

How to overlap box-shadows on table rows?