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:
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">
<col id="avg">
<col id="eng">
<col id="wales">
<col id="scot">
<col id="ni">
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.
Search WWH ::

Custom Search