Cascading Style Sheets: The Definitive Guide, Second Edition

Table Cell Borders

There are actually two quite distinct border models in CSS. The separated border model takes effect when cells are separated from each other in layout terms. The other option is the collapsed border model, in which there is no visual separation between cells, and cell borders merge, or collapse, with each other. The former is the default model, although in an earlier version of CSS the latter was the default.

An author can choose between the two models with the property border-collapse.

border-collapse

Values

collapse | separate | inherit

Initial value

separate

Applies to

elements with the display value table or table-inline

Inherited

yes

Computed value

as specified

Note:

in CSS2, the default was collapse

The whole point of this property is to offer the author a way to determine which border model the user agent will employ. If the value collapse is in effect, then the collapsing borders model is used. If the value is separate, then the separated borders model is used. We’ll look at the latter model first, since it’s actually much simpler to describe.

Separated Cell Borders

In this model, every cell in the table is separated from the other cells by some distance, and the borders of cells do not collapse into each other. Thus, given the following styles and markup, you would see the result shown in Figure 11-6:

table {border-collapse: separate;} td {border: 3px double black; padding: 3px;} <table cellspacing="0"> <tr> <td>cell one</td> <td>cell two</td> </tr> <tr> <td>cell ...