Issue with table border appearing incorrectly on Chrome browser - Verified Bug

Question

Issue with table border appearing incorrectly on Chrome browser - Verified Bug

Encountering an unusual issue that seems to be specific to Chrome, which is out of the ordinary. I have meticulously recreated the problem in the following plunkr.

http://plnkr.co/edit/k0viyc

To demonstrate the issue, you can see how the border appears in the highlighted row in Chrome but not in IE.

If either of the following rows are removed:

<tr class="spacer">
  <td colspan="14" class="noBorder noBackground">
    *** By removing this row, the extended border goes away ***
  </td>
</tr>

You will notice the corresponding border appearing/disappearing.

We have conducted numerous tests and experiments to identify the root cause without success. The primary css remains intact in the plunkr, including inline styles and classes that are mainly linked to bindings.

I am seeking input on whether there is a flaw in the current design or if this is truly a bug in Chrome. If it's indeed a bug, what elements are necessary to replicate it? Should we report it as a bug, or is it something we should simply try to avoid?

Thank you for your time in advance.

html css google-chrome internet-explorer

Answer 1

Answer №1

Seems like we've stumbled upon a bug in Chrome.

I've put together a simple example that showcases the issue:

.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>

This issue seems to be related to border rendering bug in Chromium.

The explanation from the Chromium team is somewhat concerning:

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.

In summary:

If the table has border-collapse

and the cell spans multiple columns (colspaning)

Then different border settings for that cell will not work as expected.

Possible solutions could include:

Setting border-style to hidden for the cell to hide all borders (not ideal)

Removing colspan in the spacer rows

or perhaps eliminating the spacer rows entirely and displaying the content differently.

Answer 2

Seems like we've stumbled upon a bug in Chrome.

I've put together a simple example that showcases the issue:

.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>

This issue seems to be related to border rendering bug in Chromium.

The explanation from the Chromium team is somewhat concerning:

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.

In summary:

If the table has border-collapse

and the cell spans multiple columns (colspaning)

Then different border settings for that cell will not work as expected.

Possible solutions could include:

Setting border-style to hidden for the cell to hide all borders (not ideal)

Removing colspan in the spacer rows

or perhaps eliminating the spacer rows entirely and displaying the content differently.

Answer 3

Answer №2

There appears to be a glitch involving the tr.spacer.

To temporarily fix this issue, add colspan=7 to the td within the tr.spacer.

Answer 4

There appears to be a glitch involving the tr.spacer.

To temporarily fix this issue, add colspan=7 to the td within the tr.spacer.

Answer 5

Answer №3

Encountering an issue with Chrome, it appears to be a bug with using colspan. Instead of relying on colspan, consider adding the necessary cells individually to avoid any border-related classes.

For example:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border">&nbsp;</td></tr>

Can be adjusted as follows:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border">&nbsp</td><td class="no-border">&nbsp;</td></tr>

If you are also experiencing difficulties with border-collapse, this alteration in the HTML structure could provide a solution.

Answer 6

Encountering an issue with Chrome, it appears to be a bug with using colspan. Instead of relying on colspan, consider adding the necessary cells individually to avoid any border-related classes.

For example:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border">&nbsp;</td></tr>

Can be adjusted as follows:

<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border">&nbsp</td><td class="no-border">&nbsp;</td></tr>

If you are also experiencing difficulties with border-collapse, this alteration in the HTML structure could provide a solution.

Answer 7

Answer №4

After spending days pondering this problem, I finally came up with a creative solution. Simply set the border color to match your background color.

td {
  border: 1px solid (background color);
}

Answer 8

After spending days pondering this problem, I finally came up with a creative solution. Simply set the border color to match your background color.

td {
  border: 1px solid (background color);
}

Issue with table border appearing incorrectly on Chrome browser - Verified Bug

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a unique chrome extension that swaps out HTML and JavaScript components

Tips for positioning a div element at the center of another div while ensuring it remains responsive and stays within the center

Align a button within an input field to be in line with a stacked label in

Access an HTML webpage using a PHP function

What is the best way to center text within a content wrapper?

Tips for centering content vertically in a column using Bootstrap 4

Begin jQuery animation promptly without any easing

Is there a method to trigger the opening of a calendar downwards within a modal?

CSS implementation of a treeview with a dropdown submenu

The issue of the drop-down menu not appearing persists when using HTML and CSS

Efficiently Displaying Multiple HTML Elements in React Native WebView

The Jquery AJAX request is failing to run

What is the best way to switch a single class using jQuery without impacting other elements with the same class

Using DOMParser() eliminates whitespace

Trouble Encountered When Retrieving innerHTML Content Using JavaScript

Tips on incorporating the $ symbol into a pseudo element

Is Knockout opposed to having an HTML tag nested inside another tag?

Utilizing the retina pixel ratio media query in Internet Explorer 8

Center alignment is not being applied to the SVG element

Unable to export to Excel using TableTools feature

Issue with table border appearing incorrectly on Chrome browser - **Verified Bug**

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a unique chrome extension that swaps out HTML and JavaScript components

Tips for positioning a div element at the center of another div while ensuring it remains responsive and stays within the center

Align a button within an input field to be in line with a stacked label in

Access an HTML webpage using a PHP function

What is the best way to center text within a content wrapper?

Tips for centering content vertically in a column using Bootstrap 4

Begin jQuery animation promptly without any easing

Is there a method to trigger the opening of a calendar downwards within a modal?

CSS implementation of a treeview with a dropdown submenu

The issue of the drop-down menu not appearing persists when using HTML and CSS

Efficiently Displaying Multiple HTML Elements in React Native WebView

The Jquery AJAX request is failing to run

What is the best way to switch a single class using jQuery without impacting other elements with the same class

Using DOMParser() eliminates whitespace

Trouble Encountered When Retrieving innerHTML Content Using JavaScript

Tips on incorporating the $ symbol into a pseudo element

Is Knockout opposed to having an HTML tag nested inside another tag?

Utilizing the retina pixel ratio media query in Internet Explorer 8

Center alignment is not being applied to the SVG element

Unable to export to Excel using TableTools feature

Issue with table border appearing incorrectly on Chrome browser - Verified Bug