Styling Tables - Beginning CSS3 - page 319

Eliminating the Space Between Cells
To eliminate the gap between cell borders, use border-collapse , which accepts just two values, namely:
collapse This merges adjacent borders within a table.
separate This is the default setting, which leaves a small gap between table cells.
To create a gap larger than the default, you need to use border-spacing , which is
described later in this chapter.

In border-collapse.html, the table and cells are styled like this:

table {
border: #000 solid 5px;
border-collapse: collapse;
}
td {
border: #F00 solid 1px;
}

As Figure 14-10 shows, the gap between the cells is not only eliminated, but the border around each cell is
just 1px thick, and there's no red border sandwiched between the outer cells and the table border. Because the
table border is wider, it hides the outer borders of adjacent cells. But if the cell borders are the same width as the
table border, the table border is hidden.

Figure 14-10. Using border-collapse creates single borders around the cells

■ The border-collapse property follows strict rules to decide how to merge adjacent borders.
The basic principle is that only the wider border is displayed. See
www.w3.org/TR/CSS2/tables.html#border-conflict-resolution for the full rules governing
how borders are merged.

Tip

Adding Borders to Columns and Rows
As long as border-collapse is set to collapse , you can define borders for table columns and rows.
Most browsers support borders on all table elements, including <tr> , <tbody> , <thead> , <tfoot> , <col> , and
<colgroup> , as well as <th> and <td> . However, IE 6 and IE 7 support borders only on individual table cells. As a
result, the most reliable cross-browser solution is to apply a right border to table cells to create a border on table
columns, and to apply a bottom border on table cells to add a border to table rows. If the table border is the same
color or wider, the border of the last column or row merges with the table border. For example, column_borders.
html adapts the file from one of the exercises in Chapter 13 to add a 1px border to the table and a 1px right border
to the <th> and <td> cells like this:

table {
border-collapse: collapse;
margin-left: 35px;