Two properties column-span and row-span have been added to specify the column and row span of elements with a table-cell display. The value for these properties is a strictly positive integer number. The initial value is 1. These properties are not inherited.
The low-level property start-column is generally used by style sheet extensions to specify the start column of a cell in the case of complex tables. For example, this property is used by the Java™ code that styles DocBook/CALS tables. Note that first column is column #0, not column #1. The initial value is -1, which means the normal column for the cell. This property is not inherited.
In addition to what is specified by CSS2, the :before and :after pseudo-elements allow values of the display property as follows:
If the subject of the selector is a table element, allowed values are block, marker, table-row-group and table-row. If the value of display has any other value, the pseudo-element will behave as if the value was block.
If the subject of the selector is a table-row-group element, allowed value is table-row. If the value of display has any other value, the pseudo-element will behave as if the value was table-row.
If the subject of the selector is a table-row element, allowed value is table-cell. If the value of display has any other value, the pseudo-element will behave as if the value was table-cell.
These extensions are supported to add generated column and row headers to arbitrary XML data displayed as a table.
For example, with these styles, the select, optgroup and option XHTML elements are displayed as a table with automatically generated column and row headers:
select {
display: table;
border: 1 solid black;
padding: 2;
border-spacing: 2;
background-color: silver;
}
select:before {
display: table-row-group;
content: row(cell("Category", width, 20ex), cell("Choice #1"),
cell("Choice #2"), cell("Choice #3"),
font-weight, bold, color, olive,
padding-top, 2, padding-right, 2,
padding-bottom, 2, padding-left, 2,
border-width, 1, border-style, solid);
}
optgroup {
display: table-row;
}
optgroup:before {
display: table-cell;
content: attr(label);
}
option {
display: table-cell;
border: 1 solid black;
padding: 2;
background-color: white;
}XHTML source:
<select>
<optgroup label="Language">
<option>Java</option>
<option>C++</option>
<option>Perl</option>
</optgroup>
<optgroup label="Editor">
<option>Emacs</option>
<option>Vi</option>
<option>UltraEdit</option>
</optgroup>
<optgroup label="OS">
<option>Linux</option>
<option>Windows</option>
<option>Solaris</option>
</optgroup>
</select>Rendered as:
