Pure-Essence.Net

css2 comes to the rescue

May 14th, 2003

remember how sometimes you wish to put a colored border around all table cells so all of them have a border of one pixel? unfortunately, this can be aggravatingly difficult to achieve with the border properties in CSS. The first thing you’d be likely to try might be:

table {
border-style: none;
}
td, th {
border: 1px solid black;
}

This puts the border described around each table cell. But the borders of adjacent cells combine visually to produce a 2-pixel border between cells.

Until recently, the best way to handle this was to apply borders only to the top and left edges of cells, and then add a bottom and right border to the entire table:

table {
border-top: none;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: none;
}
td, th {
border-top: 1px solid black;
border-right: none;
border-bottom: none;
border-left: 1px solid black;
}

This is messy to say the least. Fortunately, the CSS2 border-collapse property comes to the rescue:

table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}

The border-collapse property instructs the browser to combine the borders of adjacent table cells, collapsing them together. Browsers that support this include Internet Explorer 5 for Windows, Netscape 6, Mozilla, and Opera 7.