Can't remove border because of colspan in Chrome

Question

Consider following code

table {
  border-collapse: collapse;
}

td {
  border: 1px solid red;
}

td.nb {
  border: 0 !important;
}

<table>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>

I want column "Bar" to have no border but for some reason in comes with borders (top+bottom)

How can I remove borders?

Codepen: https://codepen.io/anon/pen/rwLQWG

Answer 1

It's a known Chrome issue, and quite an annoying one at that.

April 1 2014

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

(Credit to Paolo Forgia's alternate answer, which was the first to note the Chromium thread.)

---

Separating the borders would be an option, but I know that I personally dislike working with separated cell-borders; You run into issues where every other cell has to have a border on only one side and it becomes quite the headache, not to mention the convolution of CSS markup.

A workaround that would enable you to keep your collapsable borders would be something like the one below. It creates a pseudo-element in the cell that covers the red borders with white ones.

body {
    background: white;
}

table {
  border-collapse: collapse;
}
td {
  border: 1px solid red;  
}
td.nb {
  border: 0 !important;
}

/* New class for cells affected by this issue */
td.nbtb {
  position: relative;
  border: 0 !important;
}

/* Pseudo-element to cover up the borders */
td.nbtb::after {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  content: '';
  width: 100%;
  height: calc(100% + 1px);
  border: 1px solid white;
  box-sizing: border-box;
}

<table>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
    <td class="nbtb">Bar</td>
  </tr>
  <tr>
    <td class="nb" colspan="3">Foo</td>
  </tr>
</table>