CODEWITHSUNDEEP
htmlcsscss-tables
Peter
Peter

Reputation: 16923

Can't remove border because of colspan in Chrome

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?

enter image description here

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

Upvotes: 4

Views: 2681

Answers (3)

Tyler Roper
Tyler Roper

Reputation: 21672

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>

Upvotes: 4

Shammel Lee
Shammel Lee

Reputation: 4475

Remove border-collapse and add cellspacing=0 and cellpadding=0 to your table. Then change your CSS to the following… 

td {
  border-color: red;
  border-style: solid;
  border-width: 1px 0 1px 1px;  
}

td:nth-last-child(2) {
  border-right: 1px solid red;
}

td.nb {
  border: 0 !important;
}
<table cellspacing=0 cellpadding=0>
  <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>

Upvotes: 3

Paolo Forgia
Paolo Forgia

Reputation: 6748

It is a known (and old) bug of Chrome that affect version 33.0.1750.154 or later.

As workaround you can use:

border-collapse: separate;
border-spacing: 0;


table {
  border-collapse: separate;
  border-spacing: 0;
}

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>

Upvotes: 3

Related Questions