Table headers (th
) have a default center text alignment in most browsers:
header |
---|
Appendix D of the CSS2.1 spec suggests a
(1) th { text-align: center }
rule in the default UA style sheet. But not all browsers get the above alignment in such a way, as demonstrated by what follows.
The following test case has text-align: left
added to the row element (tr
) including the th
.
header |
---|
If an UA had the rule (1) in its default sheet, than the above test case should not display differently from the first one, even if text-align
is a property which "inherits", because when a property is "directly" applied to an element, then inheritance does not trigger. See CSS 2.1 section 6.1.1: inheritance is taken into account only if the cascade does not result in a value (in other words: inheritance has always less "precedence" than a specified value in the cascade).
So, according to the above, with a rule (1) in the UA sheet any text-align
applied on an ancestor of a th
should have no effect on the th
. In IE8 indeed the rendering of the above two test cases is the same. However, most other browsers (Firefox, Opera, Safari, IE<8), probably for compatibility with existing pages, behave in a way that text-align
applied to an ancestor of a th
has an effect on the th
itself. This means that they behave differently than having a rule (1) in their UA sheet. This behavior is probably not expressible in terms of standard existing CSS properties and values.
A bug filed for Gecko, about it allowing text-align on a parent to "override" the centering of a th, has been marked as invalid. Appendix D is indeed not normative, so browsers are not required to behave exactly in that way.