property set to ’hidden’ are considered to have no visible content...

Ludzie pragną czasami się rozstawać, żeby móc tęsknić, czekać i cieszyć się z powrotem.

Visible content includes " " and other whitespace except ASCII CR ("\0D"), LF ("\0A"), tab ("\09"), and space ("\20").
When this property has the value ’show’, borders are drawn around empty cells (like normal cells).
A value of ’hide’ means that no borders are drawn around empty cells. Furthermore, if all the cells in a row have a value of ’hide’ and have no visible content, the entire row behaves as if it had ’display: none’.
Example(s):
The following rule causes borders to be drawn around all cells: TABLE { empty-cells: show }
17.6.2 The collapsing border model
In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group. Borders for HTML’s
"rule" attribute can be specified this way.
Borders are centered on the grid lines between the cells. User agents must find a consistent rule for rounding off in the case of an odd number of discrete units (screen pixels, printer dots).
The diagram below shows how the width of the table, the widths of the borders, the padding, and the cell width interact. Their relation is given by the following equation, which holds for every row of the table:
row-width = (0.5 * border-width0) + padding-left1 + width1 +
padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 *
border-widthn)
Here n is the number of cells in the row, and border-widthi refers to the border between cells i and i + 1. Note only half of the two exterior borders are counted in the table width; the other half of these two borders lies in the margin area.

263
cell
border−width
padding
padding
padding
padding
padding
padding
width
border−width
width
border−width
width
border−width
table width
grid line
Schema showing the widths of cells and borders and the padding of cells.
Note that in this model, the width of the table includes half the table border.
Also, in this model, a table doesn’t have padding (but does have margins).
Border conflict resolution
In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style ’hidden’ unconditionally turns the border off.
The following rules determine which border style "wins" in case of a conflict:
1. Borders with the ’border-style’ of ’hidden’ take precedence over all other
conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of ’none’ have the lowest priority. Only if the border properties of all the elements meeting at this edge are ’none’ will the border be omitted (but note that ’none’ is the default value for the border style.) 3. If none of the styles is ’hidden’ and at least one of them is not ’none’, then narrow borders are discarded in favor of wider ones. If several have the
same ’border-width’ than styles are preferred in this order: ’double’, ’solid’,
’dashed’, ’dotted’, ’ridge’, ’outset’, ’groove’, and the lowest: ’inset’.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table.
Example(s):

264
The following example illustrates the application of these precedence rules.
This style sheet:
TABLE { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }
with this HTML source:
<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD class="solid-blue"> 5
<TD class="solid-green"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="row5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
would produce something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

265
An example of a table with collapsed borders.
Example(s):
The next example shows a table with horizontal rules between the rows. The top border of the table is set to ’hidden’ to suppress the top border of the first row. This implements the "rules" attribute of HTML 4.0 (rules="rows").
TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows] { border-collapse: collapse;
border-top: hidden }
a
b
c
3
4
5
5
12
13
Table with horizontal rules between the rows.
In this case the same effect can also be achieved without setting a ’hidden’
border on TABLE, by addressing the first row separately. Which method is preferred is a matter of taste.
TR:first-child { border-top: none }
TR { border-top: solid }
Example(s):
Here is another example of hidden collapsing borders:
Table with two omitted internal borders.
HTML source:
<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
<TD style="border: solid">bar</TD></TR>