Can't remove border due to colspan in Chrome.
Consider the 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 the "Bar" column to have no border, but for some reason it has borders (top and bottom)
How do I remove borders?
Codepen: https://codepen.io/anon/pen/rwLQWG
source to share
This is a known Chrome issue , and quite annoying.
April 1 2014
This is a known (old) issue in our table code. Collapsing borders are defined based on adjacent cells, and our code does not correctly handle enclosing cells (we only consider a cell adjacent to the first row / column in a row / column range). Also, our border granularity is determined by the cell size.
To fix this error, we will need to revise our collapsed border code, which is a serious undertaking.
( Credit to Paolo Forgia for the alternate answer who first noticed the Chromium thread.)
Splitting borders would be an option, but I know I personally don't like working with split cell borders; You run into problems where every other cell only needs to have a border on one side, and this becomes a headache, let alone folding the CSS markup.
A workaround that will allow you to keep your folding borders is 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>
source to share
This is a known (and old) one that affects version 33.0.1750.154 or newer.
As a 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>
source to share
Remove border-collapse
and add cellspacing=0
also 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>
source to share