Inheriting properties from table row and column
Inheriting property values from an <tr> to an <td> is simple, and inheriting property values from an <col> to an <td> is only slightly more complicated. <tr> contains one or more <td>, so the normal CSS rules for property inheritance apply. <col> is an empty element and, obviously, is not an ancestor of <td>. However, any inherited property can be specified on an <col> and used by the <td> (or any of its descendants) in that column by specifying ‘from-table-column()’ as the property’s value on the FO. Specifying ‘from-table-column()’ returns the inherited value of the current property. Also specifying a property name (for example, color="from-table-column(background-color)") returns the inherited value of the named property.
In the following table, Row 1 inherits the value of the <tr> property to <td>. From Row 2 onwards, <td> uses ‘from-table-column()’ to inherit properties such as character thickness, size, and color of <col> in each column.
|
Row 1, column 1
|
Row 1, column 2
|
Row 1, column 3
|
Row 1, column 4
|
|
Row 2, column 1
|
Row 2, column 2
|
Row 2, column 3
|
Row 2, column 4
|
|
Row 3, column 1
|
Row 3, column 2
|
Row 3, column 3
|
Row 3, column 4
|
|
Row 4, column 1
|
Row 4, column 2
|
Row 4, column 3
|
Row 4, column 4
|
|
Row 5, column 1
|
Row 5, column 2
|
Row 5, column 3
|
Row 5, column 4
|
The inherited value of a property that applies to <col> can still be returned by ‘from-table-column()’ to set the value of the same property, or of a different property, on an <td> or its descendants. Unlike other Rows, Row 4 has swapped background and text colors. This is because the value of ‘background-color’ in <col> is inherited to the ‘color’ of <td> by specifying color="from-table-column(background-color)", and the value of ‘color’ in <col> is inherited to ‘background-color’ in <td> by specifying background-color="from-table-column(color)".