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: