CODEWITHSUNDEEP
htmlcsshtml-tableborder
Glorfindel
Glorfindel

Reputation: 22631

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

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

enter image description here

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

enter image description here

What is the simplest (i.e. 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.

Upvotes: 1

Views: 460

Answers (2)

Temani Afif
Temani Afif

Reputation: 272723

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>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177691

Looks like a bug. This does not make sense

FX: Crome

enter image description here enter image description here

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>

Upvotes: 1

Related Questions