Is it possible to globally text-align a table column without specifying a class in each row?

Question

Wondering what the best way to make this more efficient, perhaps with jQuery. I am ok with solutions not compliant with ie7, even lack of support for ie8 might be ok if necessary.

<style type="text/css">
.cal {text-align:center}
.ral {text-align:right}
</style>
<table>
 <th>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </th>
 <tr>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </tr>
 <tr>
  <td class="cal">center</td>
  <td>left</td>
  <td class="cal">center</td>
  <td>left</td>
  <td class="ral">right</td>
 </tr>
</table>

score 5 · Accepted Answer · edited Apr 18 '12 at 06:43

5

You could add a class to the fifth td in each row using jQuery, and style the class to align text to the right.

Alternatively (and the way I do it) is using the nth child selector.

tr td:nth-child(odd) {
    text-align: center;
}

tr td:nth-child(5) {
    text-align: right;
}

it's not compatible with IE 8.0, but it is a lot simpler than a JavaScript based solution.

edited Apr 18 '12 at 06:43

mayhewr

4,003
1
18
15

answered Apr 18 '12 at 00:54

djlumley

2,955
2
24
30

This will work, based on the tip I found a great solution that has broader support for ie by applying the style with jQuery (only when using ie). There is even a jsfiddle demo to accompany the solution [link](http://stackoverflow.com/a/3951427/1101267) – chrisrth Apr 18 '12 at 08:19

score 3 · Answer 2 · edited May 23 '17 at 12:00

3

Would this work?

table td { text-align: center; }
table td:last-child { text-align: right; }

This isn't supported by IE8- unfortunately. Another alternative is using JavaScript (e.g. jQuery, since you've tagged this post with it):

$(function(){ $('table tr').each(function(){ $('td:last', this).css({textAlign: 'right'}); } )}

This question seems to be well-accepted, although it's as ugly a hack as you can get: Styling the last td in a table with css

Finally, you could cheat a little and have your last column's cell as a <th> element and then style it easily with:

table th { text-align: right; }

It wouldn't necessarily be semantically correct but it's another quick and easy option. I'm assuming the existing <th> elements in your original post are typos.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 18 '12 at 00:53

Phil.Wheeler

16,748
10
99
155

I think `:last-child` has slightly better compatibility than `:nth-child`, +1 for sportsmanship. – djlumley Apr 18 '12 at 00:56
I think they're about the same. Ref: http://www.quirksmode.org/css/contents.html#CSS3 – Phil.Wheeler Apr 18 '12 at 01:06

score 2 · Answer 3 · answered Jul 26 '12 at 18:39

2

$('td:first-child').css('text-align', 'left');
$('td:nth-child(2)').css('text-align', 'center');
$('td:last-child').css('text-align', 'right');

See http://api.jquery.com/category/selectors/child-filter-selectors/ for other filters

answered Jul 26 '12 at 18:39

Dmitri K

21
1

score -1 · Answer 4 · answered Apr 18 '12 at 06:26

<style>
td:first-child, td:first-child + td + td {
  text-align: center;
}
td:first-child + td + td + td + td {
  text-align: right;
}
</style>
<table>
<col align=center>
<col align=left>
<col align=center>
<col align=left>
<col align=right>

The style sheet works on reasonably new browsers. I have omitted the rules that set alignment to left, as that’s the default for td, but you may need to add such rules if other stylesheets may affect the alignment.

The col tags act as a backup: they use a method that should not work, by the specifications, but actually works on old versions of IE (as well as on newer versions when in Quirks Mode).

Is it possible to globally text-align a table column without specifying a class in each row?

4 Answers4

Linked