Chrome Bug with Colspan and Border

Chrome bug with colspan and border?

This appears to be the same bug listed here (or similar)

An easy workaround is at the bottom of this answer.

This is a relevant comment under that bug report:

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.

Here is an example that highlights the same problem:

html,body {  height: 100%;}table {  border-collapse: collapse;  width: 100%;  height: 100%;}.left {  border-right: 1px #aaaaaa solid;  border-top: 1px #aaaaaa solid;}.right {  border-top: double 20px #F00;}
<table>  <tr>    <td colspan=2>top</td>  </tr>  <tr>    <td class="left">left</td>    <td class="right">right</td>  </tr></table>

Can't remove border because of colspan in Chrome

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>

Chrome render bug with border-collapse

According to Chrome bug with colspan and border?, this is a Chrome bug since 2008... which is not fixed yet.

One workaround for this issue is: not use colspan. Sample code is:

<tr>
<td class=A>1</td>
<td class=A>2</td>
<td class=A>3</td>
<td></td>
<td></td>
<td></td>
</tr>

instead of

  <tr>
<td class=A>1</td>
<td class=A>2</td>
<td class=A>3</td>
<td colspan=3></td>
</tr>

fiddle for your example.

Or, you can use mistermansam's workaround by abandon border-collapse.

Erroneous table border displays in Chrome only **Confirmed Bug**

Looks like to be a Chrome bug.

Minimal showcase reproducing it

.test {  border-collapse: collapse;}
td { border: solid 1px blue;}
.no { border: none;}
<table class="test"><tr><td>one</td><td class="no">two</td></tr><tr><td class="no" colspan="2">double</td></tr></table>

Chrome table glitch when cells have rowspan and colspan

It sure sounds like chrome bug.

Have you considered using table-row-group?

thead { 
display: table-row-group
}

This will remove the repetition of table headers at page breaks.

Hope it helps, cheers!

Strange behaviour with border-collapse and colspan

The problems seems to be caused by different interpretations of the collapsing border model in browsers. The border conflict resolution is defined in terms of cells, not slots, and when you use colspan=3, one cell spans 3 slots.

The 2nd cell of the 2nd row has a solid bottom border, and the 2nd cell of the 3rd row has no top border. When borders collapse, solid wins none. But the cells are only partially adjacent, as they span different columns. Browsers hand this differently. Chrome makes the border span all the columns of the upper cell, whereas Firefox makes the border span only one column, the one that the cells share – which is more reasonable, but CSS 2.1 seems to leave the issue open.

I tried playing with border: hidden, which helps on Chrome but causes new problems on Opera.

It seems that there are two options. You could use the HTML attributes, if they do the job. Though declared obsolete and forbidden in HTML5 CR, the same document also requires continued support to them in browsers.

But a cleaner, and perhaps more robust, approach is to avoid the problem by adding more empty cells. This means dividing two 3rd row cells into two cells so that only one of them shares a border with the cell of the 2nd row. This makes the table even more grid-like, but not essentially more complex:

<table class="orgchart">
<tr>
<td colspan="3"></td>
<td colspan="2" class="case"></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" class="case" ></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2" class="bottom"></td>
<td class="right bottom"></td>
<td class="bottom" ></td>
<td colspan="2" class="bottom" ></td>
<td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
<td class="right"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="right"></td>
<td></td>
</tr>
<tr>
<td colspan="2" class="case"></td>
<td colspan="4"></td>
<td colspan="2" class="case"></td>
</tr>
</table>

CSS border issue with THEAD TBODY and COLSPAN

The corner rendering between collapsed borders does not seem well-specified, so it's not clear that this is actually a bug rather than just a variance in behaviour.

I did find a horrible workaround for Firefox, by creating a pseudo second row in the thead, and then hiding it, and also hiding the top border of the first tbody row like this:

thead:after {
content:'';
display:table-row; /* see note below */
position:absolute;
visibility:hidden;
}

tbody tr:first-child td {
border-top-width:0;
}

(Note that the display:table-row is just for show. In reality, the position:absolute causes the pseudo-element to be display:block regardless of whether the display property is set to table-row or left at its default inline. The table layout of the container will then cause that block to be wrapped in anonymous table objects of table-row and table-cell to form a well structured table.)

table {  border-collapse: collapse;}
th { border: 4px solid red; border-bottom: 4px solid black}
td { border: 4px solid blue;}
thead tr { border-bottom: 5px solid green}
table ~ table thead:after { content:''; position:absolute; visibility:hidden;}table ~ table tbody tr:first-child td { border-top-width:0;}
with THEAD and TBODY but without COLSPAN<table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td>        Content 1      </td>      <td>        Content 2      </td>    </tr>  </tbody></table><br /> COLSPAN with THEAD and TBODY <span style="background:yellow">(css bug in the middle of green border ?)</span><table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td colspan="2">        Content 1 and 2 (merged cells)      </td>    </tr>  </tbody></table><br /> COLSPAN without THEAD and TBODY<table>  <tr>    <th>      Column 1    </th>    <th>      Column 2    </th>  </tr>  <tr>    <td colspan="2">      Content 1 and 2 (merged cells)    </td>  </tr></table>

Chrome - Colspan not working as expected

What are you setting the 'display' property to in order to show it? iirc you would need to use 'display:table-cell' (or similar - can't remember the exact value) in order for chrome to treat it as a table cell

Strange border behavior in Chrome when expanding table row divs

See comments - adding < !doctype html > partly solves the issue

Addition

There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.

It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.



Related Topics



Leave a reply



Submit