CSS text-align does not work on <COL>
Home / Coffee Break / CSS text-align does not work on <COL>
I just converted a table from <col align="right"> to <col class="tr"> (with .tr {text-align:right}) and was shocked to find that, although it worked in IE 5 & 6, the table cell text is not right-aligned in Firefox or Opera.
As usual, it appears the latter two browsers are correct. A quick google turned up this tutorial -- Designing Data Part 1: Table structure -- which states:
| snook.ca wrote: |
| Setting align="right" on a column should set the text of every cell within that column to the right. These attributes are important as well because there is no CSS standard for using the text-align property on col or colgroup. Therefore, text alignment needs to be set at the HTML level. Unfortunately, Mozilla don't support the setting of align on a colgroup as of yet. IE does support text-align to be set at the CSS level even though it's not in the spec but best to stay with the HTML approach to keep things more forward compatible. |
Seems like a deficiency in the CSS spec to me. Why disallow text alignment in a <col> (and <colgroup>)? It's quite important to right-align numerical table data!
I found a WebmasterWorld thread where someone recommends using adjacent sibling selectors to target a specific column. (Eg. th+th+th+th, td+td+td+td {text-align: right;} to target column 4 onward.)
_________________
Nick
Share: 
See Mozilla bug #915 and The mystery of why only four properties apply to table columns_________________
Simon Pieters
Share:
But please don't comment in that bug - it's not going to add anything new..._________________
Web Developer, Kyanmedia
Share:
| zcorpan wrote: |
| See Mozilla bug #915 and The mystery of why only four properties apply to table columns |
Very interesting links, Simon, thank you for posting them. It seems the difficulty of fixing this bug is a consequence of a conflict between the CSS single inheritance model and the two-dimensional nature of tables. (Even though <col> is merely a neglected stepchild in comparison with <tr>!)
Here is an excerpt from message 162 (dated April 2004), by Hixie, from Mozilla bug #915, which gives some insight into the bug's longevity -- almost eight years! (The "deprecated feature" Hixie refers to is, I believe, the align and other attributes of <col> and <colgroup>. Although these are not formally deprecated in HTML 4.01 Strict, they are presentational markup, and thus against the "spirit" of abstracted content.)
| Hixie wrote: |
| This bug is about implementing <col align> and related attributes and elements, not about any CSS feature, although several of the duplicates are actually requesting CSS features that basically boil down to the same thing. That is why this bug's scope is a little vague.
An unusually large number of people, ranging from layout engine newbies like myself to ridiculously clever people like dbaron, have looked at this bug, and have utterly failed to determine any way in which it could be fixed without a significant hit to the overall performance and/or memory footprint of the rendering engine. Since the feature in question has been deprecated for some six years, rearchitecting Mozilla so that fixing this becomes possible without such a high cost is not a high priority. Note that Mozilla is not an HTML user agent, it is a CSS user agent that happens to have knwoledge of some HTML semantics. Thus when the two specifications conflict, as they do in this case, CSS has priority in deciding for which specification the design should be optimised. ... The number of votes on this bug will not affect whether this bug is fixed or not. Nor will high numbers of duplicates. We know it is a major bug, that's why so many people have tried to fix it. The only thing that can affect that is someone volunteering to fix it and doing so in a way that does not negatively effect page load performance, memory footprint, or our existing CSS compliance. |
_________________
Nick
Share:
If you want a workaround for this problem, then for tables without different colspans on different rows, you can use something like this:
| Code: |
| col.numerical { text-align:right; } /* for IE; should have no effect according to CSS 2.1 */
td:first-child + td { text-align:right; } /* right-align the second column */ |
| Code: |
| <table>
<col><col class="numerical"><col> <tbody> <tr><td>aaaaa</td> <td>2</td> <td>ccccc</td></tr> <tr><td>d</td> <td>55555</td> <td>f</td></tr> </tbody> </table> |
_________________
Simon Pieters
Share:
Page 1 of 1
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum