Border collapse bugs in table element

Page published on
Last modified on

This is a very old bug testcase page from year 2007.

border-collapse : collapse; CSS bugs with tables

This cell should not be visible.
This cell should be surrounded by a single 1px red border.

What we have above is a regular table with two cells: the first one has been hidden while the other is visible. border-collapse : collapse; has been applied and borders of 1px added to both table and cells. However, both Firefox and IE render the table incorrectly: Firefox doesn’t render the borders at all while Internet Explorer renders the border of the hidden cell.

<table class="tableWithBorderCollapse">
	<tr>
		<th class="hiddenCell">This cell should not be visible.</th>
	</tr>
	<tr>
		<td class="tableCell">This cell should be surrounded by a single 1px red border.</td>
	</tr>
</table>

This bug exists in Firefox up to version 2 and in Internet Explorer versions 5 to 7.

How to resolve?

In this case you could resolve the bug by hiding the entire row instead.

Opera bug

Below is another table with four cells: the first one is hidden while the other ones are visible.

This cell should not be visible.This cell should be visible.
This cell should be visible.This cell should be visible.

Opera renders only half of the top border of the table while it should render all of it. This bug exists in versions from Opera 7 to Opera 9.10.

<table class="tableWithBorderCollapse">
	<tr>
		<th class="hiddenCell">This cell should not be visible.</th>
		<td class="tableCell">This cell should be visible.</td>
	</tr>
	<tr>
		<td class="tableCell">This cell should be visible.</td>
		<td class="tableCell">This cell should be visible.</td>
	</tr>
</table>

How to resolve?

You must have an empty cell in the table.

Return to the blog