Bruno Fassino wrote this note:
Table headers (
th
) have a default center text alignment in most browsers.Appendix D of the CSS2.1 spec suggests a
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 theth
.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 ath
should have no effect on theth
. 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 thattext-align
applied to an ancestor of ath
has an effect on theth
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.