PDA

View Full Version : Making <th> align right only on one <th>



tomyknoker
Apr 11th, 2007, 11:48 AM
How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th>



<thead>
<tr>
<th scope="col" class="twentyfive">STATUS</th>
<th scope="col" class="twentyfive">VIEW</th>
<th scope="col" class="twentyfive">DOWNLOAD</th>
<th scope="col" class="twentyfive">TOTAL</th>
</tr>
</thead>

Do I need to add something like this?


table.main thead tr th.twentyfive {
/*border: 1px solid #fff;*/
width: 25%;
}
table.main thead tr th.twentyfive.right {
/*border: 1px solid #fff;*/
width: 25%;
float: right;
}

Pennimus
Apr 11th, 2007, 01:18 PM
You need to apply a unique class to the end cell, and use text-align:right;

VIPStephan
Apr 11th, 2007, 01:29 PM
To extend and clarify Pennimus’ reply:



<thead>
<tr>
<th scope="col" class="twentyfive">STATUS</th>
<th scope="col" class="twentyfive">VIEW</th>
<th scope="col" class="twentyfive">DOWNLOAD</th>
<th scope="col" class="twentyfive total">TOTAL</th>
</tr>
</thead>



.total {text-align: right;}


Also I’d advise you to use class and ID names that describe the function of the element, not the assumed look… you can make green text appear blue and the class name wouldn’t/shouldn’t change - so a class="green" wouldn’t make sense anymore in this case.

Arbitrator
Apr 11th, 2007, 08:16 PM
It might also make sense to use an ID instead of a second class name if you intend to target only a single element (that table cell). IDs indicate that you’re targeting something unique, have greater specificity, and can be manipulated more easily via JavaScript.

If you’re curious, the pure CSS2/2.1 (WD) way to target that cell would be to use adjacent sibling combinators (http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors) (+), as shown below. Keep in mind that Internet Explorer versions prior to 7 do not support them.

table.main thead th + th + th + th

The CSS3 Selectors Module (WD) method adds a new pseudo‐class called :last-child (http://www.w3.org/TR/css3-selectors/#last-child-pseudo) that’s even more convenient. Unfortunately, neither Internet Explorer nor Opera support this one at all.

table.main thead th:last-child