CSS for Developers: Cross Browser Table Border Behaviour
One of the aims of this series is to highlight some stupid gotchas in support for CSS in the different browsers.
Today’s gotcha is table borders.
Yes, yes, I said don’t use tables. What I means is, don’t use tables for layout. But you can use tables for, you know, tabular data. Like, for examples, lists of instruments and their bid and ask prices.
But you should know that even when you use strict mode, Internet Explorer has slightly… eccentric… rendering behaviour for tables. Actually to be specific, it’s IE7 only.
<html>
<head>
<title>Table Borders</title>
<style type="text/css”>
table, td {
border: 1px solid black;
}
td {
height: 20px;
min-width: 5px;
}
</style>
</head>
<body>
<table cellpadding="0” cellspacing="0”>
<tr>
<td>first cell</td>
<td>second</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
</body>
</html>
The HTML here is a simple table with a border round all the cells (using CSS border, not the deprecated border attribute on the table) - a fairly common situation.
This is how it renders in IE7:
Note the distinct lack of a border around the lower two cells. If a table cell is empty, or contains a div which is empty, IE doesn’t render the cell at all.
The cheat to get around this is to add into every empty cell - either inside the div, if there’s a div in there, or inside the td if there’s nothing else in there. Then IE wakes up and remembers to render the borders.