How do I remove these lines between table tds?

Question

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

What browser are you using? As Firefox only shows a little white space shining through where the `box-shadow`s are not lining up/overlap. No black vertical line as in the image you posted... — Rene van der Lende, Jun 05 '22 at 14:52
I don't know what your use-case is, but is there a reason you're not positioning the `box-shadow` on the `` element, rather than the `
` elements? — David Thomas, Jun 05 '22 at 15:03
@RenevanderLende Chrome. I just tested in Firefox, and you are right. A smaller problem there, as it is only a bit of white space in the shadow itself. — Vemb, Jun 05 '22 at 16:13
@DavidThomas Yes. I just added an edit to the question to clarify. — Vemb, Jun 05 '22 at 16:14

AStombaugh · Answer 1 · 2022-06-05T17:05:45.090

2

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>

edited Jun 05 '22 at 17:05

answered Jun 05 '22 at 15:29

AStombaugh

2,930
5
13
31

Thanks, but I have to apply the shadow to the TD. I have added an edit to my question to clarify. – Vemb Jun 05 '22 at 16:30
@Vemb I edited my code and applied it to the `` instead, would that work? – AStombaugh Jun 05 '22 at 17:07
1

Sorcery! Thanks. Using `filter: drop-shadow` on the `` instead of `box-shadow` on the ``s did the trick. It's slightly limiting as `drop-shadow` doesn't accept the `spread` and `inset` parameters, but it seems like the best solution to the problem. – Vemb Jun 06 '22 at 07:28

Brennan · Answer 2 · 2022-06-05T14:19:33.090

0

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

How to overlap box-shadows on table rows?

edited Jun 05 '22 at 14:19

answered Jun 05 '22 at 12:49

Brennan

337
5
10

Thanks, but there is a reason. I have multiple TRs in a table that is both sortable and has expandable rows (via a hidden row). I want a box-shadow on 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. And this is where I get my problem. – Vemb Jun 05 '22 at 14:10
Ah, well maybe try this masking approach? https://stackoverflow.com/questions/62101392/how-to-overlap-box-shadows-on-table-rows – Brennan Jun 05 '22 at 14:18
Thanks. I made a Fiddle to work on this with my scenario (with shadows on TDs and horizontal masking, instead of TRs and vertical). But I can't get it to play ball: https://jsfiddle.net/hjdaf4qm/1/ – Vemb Jun 05 '22 at 16:50

How do I remove these lines between table tds?

Problem

Note

2 Answers2