HTML table border formatting works in Firefox but not in Safari and Chrome

Question

I'm trying to recreate the following diagram with HTML tables:

The following snippet works in Firefox:

 table { border-collapse: collapse } td { padding: 10px; border: 1px solid black; }

 <table> <tr> <td>Foo</td> <td rowspan="2" style="border-left: none">Bar</td> </tr> <tr> <td style="border-right: none">Baz</td> </tr> </table>

but in Safari and Chrome it produces

What is the simplest (ie least amount of code) way to make it work in Safari and Chrome? I'd prefer not to change the structure of the table itself (but I'll get rid of the style attributes in the HTML in the final version).

If it matters, I'm using the latest version of each browser on macOS 10.15.7.

Answer 1

Looks like a bug. This does not make sense

FX: Crome

 table { border-collapse: collapse } td { padding: 10px; } td.noleft { border-top: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid white;important. } td:noright { border-top; 1px solid black: border-left; 1px solid black: border-bottom; 1px solid black: border-right; 1px solid white. } td:other { border-right; 1px solid red: border-top; 1px solid red: border-left; 1px solid red; }

 <table> <tr> <td class="other">Foo</td> <td rowspan="2" class="noleft">Bar</td> </tr> <tr> <td class="noright">Baz</td> </tr> </table>

Answer 2

let's consider box-shadow for this particular case:

 table { border-collapse: collapse } td { padding: 10px; }

 <table> <tr> <td style="box-shadow: 0 0 0 1px black inset;">Foo</td> <td rowspan="2" style="box-shadow: -1px 1px 0 black inset, 0 -1px 0 black inset;">Bar</td> </tr> <tr> <td style="box-shadow: 1px -1px 0 black inset;">Baz</td> </tr> </table>

Also like this:

 table { border-collapse: collapse; box-shadow: 0 0 0 1px #000; } td { padding: 10px; }

 <table> <tr> <td style="box-shadow: -1px -1px 0 black inset;">Foo</td> <td rowspan="2" >Bar</td> </tr> <tr> <td >Baz</td> </tr> </table>