table column in firefox

Mozilla Taiwan 討論區: [問題]col標籤的style - 在 firefox 就算是設定col.foo{color:red} 也是不會吃的

你可以看一下 W3C 的 CSS RC 中對 table, col, colgroups 是怎麼規定的。 http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#q4
也就是說，只有 border, background, width, visibility 這四個屬性才能套用在 col, colgroups 上面，用來將置中是不合標準的。
Mozilla/Firefox其實是個只支援CSS排版的瀏覽器, HTML效果都是靠預先定義的CSS rule來顯示。
碰巧這個是CSS不能完全替代HTML的其中一個問題，故目前Mozilla/Firefox都沒有支援。
其實問題Mozilla跟CSS工作組一直都在研究中，但暫未有一個可行的方案(CSS的Generated Content都有相似的問題，故Mozilla不支援，Opera支援的相當buggy)，詳細你可看bug 915(看看bug number就可以知道... 看似異常簡單的問題，已經持續了半個年代 Laughing )
至於為何CSS不草草的用text-align取代HTML的align等屬性，可看看CSS2.1作者的解說。

Hixie's Natural Log: The mystery of why only four properties apply to table columns

The answer to this question lies in another question: How would you implement it?

The colour of text is dependent on the 'color' property of its element. Unless specified, the 'color' property (basically) defaults to 'inherit', which means "take the value of the parent element".

So for some text in a cell, the colour is determined by the 'color' property of the cell, which is taken from the row, which is taken from the table, which is taken from the table's parent, and so on.

What about the column? Well, the column isn't one of the cell's ancestors, so it never gets a look-in! And therein lies the problem.

Now, while that explains why it doesn't apply in the current model, it doesn't actually explain why the model couldn't be changed a little. For example you could say that if a cell has no value set, it should inherit from the column instead of the row.

Unfortunately, you then run into two problems. The first is that in CSS, everything is always set. That isn't a huge problem, because you could always say that the initial value of certain properties was 'auto' or 'normal', and have that value Do The Right Thing when inherited. It wouldn't be pretty, but it could be done. (This is the approach I used to solve some similar problems in the CSS3 Generated and Replaced Content module.)

The second problem is rather more fundamental, and to explain it we'll take a look at the overall processing model for CSS.
Here is how CSS works, at a very high level:

   1. Parse the stylesheets and the document.
   2. For each element in the document:
         1. Decide which CSS rules apply.
         2. Perform the CSS cascade with those rules.
         3. Perform inheritance of properties if the result of the cascade is the keyword 'inherit' (or no specified value for inherited properties).
         4. Perform computations (turn 'em's into 'px's, etc). According to CSS2.1, the getComputedStyle() DOM method returns these values.
      At this point, every element has a value for every property ('display', 'color', etc).
   3. Lay out the document.
   4. Paint the document.

So why does it work in IE6? Well, it can do this despite what I said above because it doesn't support explicit CSS inheritance (the 'inherit' keyword), it doesn't support getComputedStyle(), and it doesn't support 'display: table-column' and the other table display types. In IE6, the model is probably more like:

   1. Parse the stylesheets and the document.
   2. For each element in the document:
         1. If it's a table, map out its structure.
         2. Decide which CSS rules apply.
         3. Perform the CSS cascade.
         4. Perform inheritance of properties, inheriting magically from table columns if the column isn't inheriting its style itself.
   3. Lay out the document.
   4. Paint the document.