Basic Concepts - CSS Reference - page 26

2. If the computed width of the table is auto , the final width of the table is determined by
summing up the column widths, borders, and cell-spacing. This means the table will be
only as wide as needed to display its content, just as with traditional HTML tables. Any
columns with percentage widths use that percentage as a constraint, but it is a constraint
that a user agent does not have to satisfy.
Once the last step is completed, then (and only then) can the user agent actually lay out the
table.
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 oth-
er 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 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 value for border-style .
3. If at least one of the collapsing borders has a value other than either none or hidden ,
narrow borders lose out to wider ones. If two or more of the collapsing borders have the
same width, the border style is taken in the following order, from most preferred to least:
double , solid , dashed , dotted , ridge , outset , groove , inset . Thus, if two borders