CSS Pocket Reference, 3rd Edition

Collapsing Cell Borders

The collapsing cell model largely describes how HTML tables have always been laid out when they have no cell-spacing. The following rules govern this model:

• Table elements cannot have any padding, although they can have margins. Thus, there is never separation between the border around the outside of the table and its outermost cells.

• Borders can be applied to cells, rows, row groups, columns, and column groups. The table element itself can, as always, have a border.

• There is never any separation between cell borders. In fact, borders collapse into each other where they adjoin so that only one of the collapsing borders is actually drawn. This is somewhat akin to margin-collapsing, where the largest margin wins. When cell borders collapse, the “most interesting” border wins.

• Once they are collapsed, the borders between cells are centered on the hypothetical grid lines between the cells.

Collapsing borders

When two or more borders are adjacent, they collapse into each other, as shown in Figure 1-5. There are some strict rules governing which borders will win and which will not:

1. If one of the collapsing borders has a border-style of hidden, it takes precedence over all other collapsing borders: all borders at this location are hidden.

2. If one of the collapsing borders has a border-style of none, it takes the lowest priority. There will be no border drawn at this location only if all of the borders meeting at this location have a value of none. Note that none is the default ...