<table id="table">
<thead>
<!-- need to establish the max number of columns in the first row for the table algorithm to work efficiently -->
<tr class="top">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th colspan="5"> </th>
<th colspan="4" class="center">1</th>
<th colspan="1">2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" rowspan="4">3</td>
<td colspan="4" class="nowrap">4</td>
<td colspan="1">5</td>
</tr>
<tr>
<td colspan="4" class="center">6</td>
<td colspan="1" class="center">7</td>
</tr>
<tr>
<td colspan="4">8</td>
<td colspan="1">9</td>
</tr>
<tr>
<td colspan="4" class="center">10</td>
<td colspan="1" class="center">11</td>
</tr>
<tr>
<td colspan="2" class="nowrap">12</td>
<td colspan="5">13</td>
<td colspan="2">14</td>
<td colspan="1">15</td>
</tr>
<tr>
<td colspan="2" class="center">16</td>
<td colspan="5" class="center">17</td>
<td colspan="2" class="center">18</td>
<td colspan="1" class="center">19</td>
</tr>
<tr>
<td colspan="2" class="center">20</td>
<td colspan="5" class="center">21</td>
<td colspan="2" class="center">22</td>
<td colspan="1" class="center">23</td>
</tr>
<tr>
<td colspan="2" class="center">24</td>
<td colspan="5" class="center">25</td>
<td colspan="2" class="center">26</td>
<td colspan="1" class="center">27</td>
</tr>
<tr>
<td class="center shrink" >28</td>
<td colspan="5" class="center" >29</td>
<td class="center shrink">30</td>
<td class="center">31</td>
<td class="center">32</td>
<td class="center">33</td>
</tr>
<tr>
<td class="center shrink">34</td>
<td colspan="5" class="center">35</td>
<td class="center shrink">36</td>
<td>37</td>
<td>38</td>
<td>39</td>
</tr>
<tr>
<td colspan="10">40</td>
</tr>
<tr>
<td colspan="8" class="center">41</td>
<td rowspan="3" colspan="2">42</td>
</tr>
<tr>
<td colspan="8">43</td>
</tr>
<tr>
<td colspan="8">44</td>
</tr>
<tr>
<td colspan="8">45</td>
<td colspan="2">46</td>
</tr>
</tbody>
</table>
table, th, td {
padding: 3px 8px;
border: 1px solid #666;
border-collapse: collapse;
}
th.invalid, td.invalid {
border: 1px double #666;
padding:0 !important;
margin:0 !important;
}
#table {
max-width: 2480px;
width:100%;
}
.shrink {
width:1%
}
.center {
text-align:center;
}
.nowrap {
white-space:nowrap;
}
tr.top th {
border:none;
padding:0;
visibility:hidden;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.