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:\[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>\[/code\]CSS:\[code\].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;}\[/code\]
