Web Design in a Nutshell, 3rd Edition

The Collapsing Border Model

In the collapsing border model , the borders of adjacent borders “collapse” so that only one of the borders is visible and extra space between borders is removed. Figure 22-6 shows the table from the previous examples, only this time, the border-collapse property has been set to collapse.

    table {border-collapse: collapse;
           border: none;}

    td { border: 1px solid black; }

Figure 22-6. A table with collapsed borders

Borders between cells are centered on the grid lines between cells. Therefore, if two adjacent cells have a border that is eight pixels wide, four pixels will fall in one cell and four pixels will fall in the other. If a border has an odd number of pixels, it is left to the user agent to decide where the extra pixel goes. Wide borders on the outside edge of the table may extend into the table’s margin.

Tip

Explicitly declaring border-collapse: collapse for tables removes any extra space and little gaps in the border that may be automatically inserted by the browser.