Complex table with many colspans

setting column widths

by clairesuzy

HTML

<div id="CalendarReservationsBody">

<table class="CalendarReservationsBodyTable" cellspacing="0">
<col span="1" class="wide">
<col span="96" class="slim">
    
<tbody id="test">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>    
<thead>
<tr>
<th class="">Auto</th>
<th class="odd" colspan="4">0</th>
<th class="" colspan="4">1</th>
<th class="odd" colspan="4">2</th>
<th class="" colspan="4">3</th>
<th class="odd" colspan="4">4</th>
<th class="" colspan="4">5</th>
<th class="odd" colspan="4">6</th>          <th class="" colspan="4">7</th>         <th class="odd" colspan="4">8</th>          <th class="" colspan="4">9</th>         <th class="odd" colspan="4">10</th>         <th class="" colspan="4">11</th>            <th class="odd" colspan="4">12</th>         <th class="" colspan="4">13</th>            <th class="odd" colspan="4">14</th>         <th class="" colspan="4">15</th>            <th class="odd" colspan="4">16</th>         <th class="" colspan="4">17</th>            <th class="odd" colspan="4">18</th>         <th class="" colspan="4">19</th>            <th class="odd" colspan="4">20</th>         <th class=""...

CSS

#CalendarReservationsBody table tbody#test td {height: 0; overflow: hidden; border: 0; padding: 0;}
/* empty row is needed for Webkit browsers and it can't be hidden with display: none, or it doesn't work */

#CalendarReservationsBody table.CalendarReservationsBodyTable {
    width: 100%; /* comment out this to see real width */
    border-collapse: collapse;
    background: #F9F5D7;
    border: 1px solid #000;
    table-layout: fixed;
    font-family: arial, verdana, sans-serif;
    font-size: 13px;
}

#CalendarReservationsBody .CalendarReservationsBodyTable col.wide {width: 100px;}
#CalendarReservationsBody .CalendarReservationsBodyTable col {width: 6px;}
#CalendarReservationsBody .CalendarReservationsBodyTable col {width: 5px !ie7;}

#CalendarReservationsBody table.CalendarReservationsBodyTable th,
#CalendarReservationsBody table.CalendarReservationsBodyTable td {
    padding: 3px; /* side padding here on all columns interferes with table width a lot */
    border: 1px solid #000;
}

#CalendarReservationsBody table.CalendarReservationsBodyTable th+th,
#CalendarReservationsBody table.CalendarReservationsBodyTable td+td {
  padding: 0; /* cancel padding on all columns except the first */
}

#CalendarReservationsBody table.CalendarReservationsBodyTable td {
    border: 0;
    border-bottom: 1px solid #000;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.borderLeft {
    border-left: 1px solid #000;
}

#CalendarReservationsBody table.CalendarReservationsBodyTable thead th {
    background-color: #6FA7D1;
    color: #FFF;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable th.corner {
    text-align: left;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted {
    background: #FFB856;
    text-align: center;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted:hover {
    background: #FF9000;
}