<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">&nbsp;</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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.