What is the proper CSS way to implement right-aligned text on table columns?

Question

To my surprise I just found out that applying text-alignment to a table column is fairly bad supported in current browsers. Neither Firefox 3.5.2, Safari 4.0.3 or IE8 shows the "amount" column below as right aligned.

HTML:

<table class="full_width">
  <caption>Listing employees of department X</caption>
  <col></col>
  <col></col>
  <col></col>
  <col class="amount" width="180"></col>
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone number</th>
      <th>Email</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>+45 2373 6220</td>
      <td>john@doe.com</td>
      <td>20000</td>
    </tr>
  </tbody>
</table>

CSS

.amount{
  text-align: right;
}

Why isn't this working? Also I tried (via firebug) to turn off Firefox' native rule that left-aligns TD elements, but that didn't work either.

I can see that setting background color rule in the amount css class actually works. So I know that the .amount class is applied to all columns:

CSS

.amount{
  text-align: right;
  background-color: aqua;
}

The CSS 2 spec apparently says that only four attributes are supported by col element -- see Why is styling table columns not allowed?

Criteria for selecting the best solution: must be supported fairly cross-browser (not necessarily in IE6 where I could live with using jquery or a conditional comment to include a specific solution). Also, I expect to apply multiple classes multiple different columns (ie. class="amount before_tax")

I'd hate to set classes on the relevant td in each row. What are my options?

score 7 · Accepted Answer · answered Sep 08 '09 at 08:25

7

I'd hate to set classes on the relevant td in each row. What are my options?

That would be it: class on each td.

answered Sep 08 '09 at 08:25

cletus

616,129
168
910
942

I hate to accept this answer, but the other present options are probably too locked or browser specific – Jesper Rønn-Jensen Sep 09 '09 at 10:57
Cross-browser including IE6 means only two options: class on each TD or Javascript and the first option is much much better. – cletus Sep 09 '09 at 11:01
UGH. >.< I was so hoping to find out that this is not the way. – noio Jan 29 '12 at 17:54

score 2 · Answer 2 · answered Sep 08 '09 at 08:29

2

If you don't want to add the class to each cell in a column manually, your only other option is to use javascript to do it.

With jQuery:

$("table tbody tr td:eq(3)").addClass("amount");

answered Sep 08 '09 at 08:29

Garry Shutler

32,260
12
84
119

score 1 · Answer 3 · answered Sep 08 '09 at 08:52

1

You can always set a class on on the last element in a row:

.full_width td:last-child {
    text-align: right;
}

answered Sep 08 '09 at 08:52

Nino

201
1
7

Yep, or more generally nth-child. Of course these are CSS3 selectors, so don't expect support in IE. IE7+ has only CSS2's first-child. – bobince Sep 08 '09 at 09:08

score 0 · Answer 4 · answered Sep 08 '09 at 08:28

0

you have to set the class on the td elements. I think that's the only way.

answered Sep 08 '09 at 08:28

Nir Levy

4,613
2
34
47

score 0 · Answer 5 · answered Sep 09 '09 at 11:08

Your answers got me thinking about creating a JQuery script that parses COL elements. Then it should find each row matching the corresponding COL and apply the COL class to each element like so:

enter code here$("table tbody tr td:eq(3)").addClass("amount");

But only do it, (as a performance improvement), if the class definition contains a text-align in it.

Of course, a full complex implementation of colspan and COLGROUP elements will be overkill and most likely not supported.

Any thoughts on that idea?

What is the proper CSS way to implement right-aligned text on table columns?

5 Answers5