CSS Table - Mix of Center and Left Alignment in rowspanned table - html

Question

Here's my current fiddle:
http://jsfiddle.net/UjAQf/106/
For the Sport, Status, and Result headings and columns, I want to align center.
For the Pick, Genius, and Genius Credential heading and columns, I want to align left.
For the "picksHeading," I want to align left.
What's the most-efficient way to do this?
--
Code:
<div class="geniusPicks">
<table cellpadding="1" cellspacing="0">
<thead>
<tr id="picksHeading">
<th>Sport</th>
<th>Status</th>
<th colspan="2">Pick</th>
<th>Genius</th>
<th>Genius Credential</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr class="bigGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
<tr class="pickHeading">
<td colspan="7">blah</td>
</tr>
<tr class="pickBody">
<td rowspan="4">plah</td>
<td rowspan="4">flah</td>
<td rowspan="4">glah</td>
<td>vlah</td>
<td>mlah</td>
<td>nlah</td>
<td rowspan="4">jlah</td>
</tr>
<tr class="pickBody">
<td>clah</td>
<td>dlah</td>
<td>xlah</td>
</tr>
<tr class="pickBody">
<td>plah</td>
<td>slah</td>
<td>klah</td>
</tr>
<tr class="pickBody">
<td>qlah</td>
<td>wlah</td>
<td>zlah</td>
</tr>
<tr class="smallGap">
<td colspan="7"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.geniusPicks {}
.geniusPicks table {width:100%; font-size:12px;}
.geniusPicks table tr#picksHeading {border:1px solid; background-color:red; height:30px;}
.geniusPicks table tr.pickHeading {border:1px solid;}
.geniusPicks table tr.pickBody td {border:1px solid;}
.bigGap td {height:19px;}
.smallGap td {height:10px;}

Answer 1

you can either add classes to the cells you'd like centered or this might work for you,
Working Example
CSS added:
.geniusPicks table th,
.geniusPicks table th+th+th+th+th+th,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {
text-align: center;
}
.geniusPicks table th+th+th,
.geniusPicks table .pickHeading+tr td+td+td {
text-align: left;
}
This CSS makes use of the Adjacent Sibling Selector in two places
.pickHeading+tr - this only targets the cells which come in the row tr which is an immediate sibling of the pickHeading row - which is your 7 celled row, this means the smaller rows the ones with only 3 celss never get targeted and are left to default to the left
td - targets every cell
td+td+td+td+td+td+td - targets every cell which has 6 others preceding it (7)
td+td+td - targets every cell which has 2 others preceding it (3,4,5,6,7)
so the last example in #2 above overrules for cells 3 4 5 & 6, but not 7 as the 2nd example above is more specific
It could probably be done with :nth-child to but this way is supported by IE7, and needs one less rule!