HTML and CSS Reference
In-Depth Information
Applying Other Styles to Columns
The CSS table model is described as being
row primary
because you specify rows explicitly in the HTML markup.
Columns are derived from the cells in each row. Although the HTML
<colgroup>
and
<col>
elements allow you
to specify column groups and individual columns, neither is required.
If you decide to specify column groups and columns in the HTML markup, you need to be aware that
columns accept only four styles, namely:
background
border
width
visibility
For borders on columns and column groups,
border-collapse
must be set to
collapse
.
When used for
<colgroup>
or
<col>
, the only legal value for
visibility
is
collapse
. According to the
specification, this hides the column and reduces the width of the table by the column's width. However, this is
currently implemented correctly only by IE 8+ and Opera 11 + .
To demonstrate the use of
visibility
with columns, the HTML markup in column_collapse.html identifies
the six columns in a table like this:
<colgroup span="1">
<colgroup>
<col id="avg">
<col id="eng">
<col id="wales">
<col id="scot">
<col id="ni">
</colgroup>
The styles then hide the second and fourth columns like this:
#avg, #wales {
visibility: collapse;
}
Figure
14-14
shows the result in IE 9. The columns are correctly hidden, and the width of the table has
been reduced accordingly. Recent versions of Opera produce the same result. Firefox 14 removes the columns
correctly, but leaves the outlines of two empty columns on the right. Chrome 21 and Safari 6 ignore the
visibility
property on columns.
