Better way to right align text in an HTML table

Updated (after 10+ years!): Yes! It’s possible to do this more efficiently now, with widespread practical browser support, using the nth-child selector.

HTML:

<table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS:

table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

Previously, it was not possible to do this, because browser support used to be inconsistent and hit-or-miss, especially with regard to newer CSS features. This made it impossible to use more elegant, efficient solutions — and required lots of repetitive markup and class definitions in order to get consistent results across the audience’s browser space.

See the edit history for the previous version of this answer.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)