2

If I have a table with collapsed borders, and a table cell with a colspan and no border, and it spans adjacent cells with and without borders, Safari will show a border where there should not be one. I can fix this by having extra table cells to prevent the colspan extending from an adjacent cell with a border to another cell without a border. I'd prefer to solve this with pure CSS instead of cluttering up my HTML. Any thoughts on how I might do that?

Here’s a minimal example:

body {
    background: white;
    color: black;
}
table {
    border: none;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
td.empty {
    border: none;
}
<table>
  <tr>
    <td class="empty" colspan="2">Should be borderless, but has a bottom border</td>
  </tr>
  <tr>
    <td>Bordered</td>
    <td class="empty">Borderless</td>
  </tr>
</table>

Here is a related question: Strange behaviour with border-collapse and colspan

Here is the WebKit bug: Bug 20840 - Wrong collapsing border resolution when a table has cells with different colspans

Here is the project where I first noticed this bug: Chemistry Explorer

I tried several pure CSS solutions. I could make the errant border invisible by setting it to the same color as the background, like so:

td.empty {
    border: 1px solid white;
}

However, that also makes the border invisible on the adjacent bordered cell.

I also tried several variations of setting border-bottom and border-top properties, but those had no effect. I tried a bunch of experiments with things like the overflow property with no success.

Eventually I was able to solve the issue only by creating extra table cells, so that the colspan does is not adjacent to both bordered and borderless cells.

This bug occurs in Safari 16.3.1 & 16.4, on iOS, iPadOS, and macOS. The bug does not occur in Chrome 111.x or 112.x.

Brett Donald
  • 6,745
  • 4
  • 23
  • 51
Ben Thornton
  • 36
  • 5
  • 1
    How important is border collapse in your application? Without it the borders behave OK. Also in the original it’s not the colspan 2 td that has a bottom border, it’s the not .empty one that is given a two cell width border. – A Haworth Apr 08 '23 at 21:48
  • You're correct, it's the lower left table cell's top border that extends too far right instead of stopping at the end of the cell. I prefer the look of collapsed borders, but I'm open to another solution if you know of one. – Ben Thornton Apr 08 '23 at 23:36
  • [Report it to Apple](https://developer.apple.com/bug-reporting/) – Brett Donald Apr 10 '23 at 01:48
  • Hi Brett, there's already a bug report from 2008 here: https://bugs.webkit.org/show_bug.cgi?id=20840 – Ben Thornton Apr 10 '23 at 18:30

0 Answers0