Table headers and text alignment in CSS

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 the th.

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.