Is it possible to globally text-align a table column without specifying a class in each row?
css, jquery
Solution
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.
Problem
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> ```