O'Reilly logo

Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required