Why table headers wouldn't line break even though table was too wide for containing div?

by supertrue

HTML

<div><table><colgroup> <col width="2%" /> <col width="1%" /> </colgroup> <colgroup> <col width="1%" /> <col width="1%" /> <col width="1%" /> </colgroup> <colgroup style="background-color: red !important;"> <col width="1%" /> <col width="1%" /> <col width="1%" /> </colgroup>
<thead>
<tr>
<th scope="colgroup"></th>
<th scope="col" rowspan="2"> Productivity per hour (2005=100)</th>
<th scope="colgroup" colspan="3">Real wage levels</th>
<th scope="colgroup" colspan="3">Hours worked</th>
</tr>
<tr>
<th scope="col"></th>
<th scope="col">Annual wages</th>
<th scope="col">Weekly wages</th>
<th scope="col">Hourly wages</th>
<th scope="col">Annual hours</th>
<th scope="col">Weeks
per year</th>
<th scope="col">Hours per
week</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1967</th>
<td>52.3</td>
<td> $29,555</td>
<td> $678.58</td>
<td> $17.24</td>
<td> 1,716</td>
<td> 43.5</td>
<td> 39.3</td>
</tr>
<tr>
<th scope="row">1973</th>
<td>60.2</td>
<td> 34,378</td>
<td> 791.40</td>
<td> 20.50</td>
<td> 1,679</td>
<td> 43.4</td>
<td> 38.6</td>
</tr>
<tr>
<th scope="row">1979</th>
<td>64.2</td>
<td> 34,632</td>
<td> 789.79</td>
<td> 20.34</td>
<td> 1,703</td>
<td> 43.8</td>
<td> 38.8</td>
</tr>
<tr>
<th scope="row">1989</th>
<td>73.1</td>
<td> 37,685</td>
<td> 830.34</td>
<td> 21.13</td>
<td> 1,783</td>
<td> 45.4</td>
<td> 39.3</td>
</tr>
<tr>
<th scope="row">1995</th>
<td>78.8</td>
<td> 38,768</td>
<td> 843.83</td>
<td> 21.22</td>
<td> 1,827</td>
<td> 45.9</td>
<td> 39.8</td>
</tr>
<tr>
<th scope="row">2000</th>
<td>88.5</td>
<td> 43,616</td>
<td> 929.04</td>
<td> 23.24</td>
<td> 1,876</td>
<td> 46.9</td>
<td> 40.0</td>
</tr>
<tr>
<th scope="row">2007</th>
<td>102.0</td>
<td> 43,615</td>
<td> 920.91</td>
<td> 23.16</td>
<td> 1,883</td>
<td> 47.4</td>
<td> 39.8</td>
</tr>
<tr>
<th scope="row">2010</th>
<td>108.2</td>
<td> 43,194</td>
<td> 928.18</td>
<td> 23.79</td>
<td> 1,815</td>
<td> 46.5</td>
<td> 39.0</td>
</tr>
</tbody>
<tbody>
<tr class="table-pseudo-header">
<th...

CSS

div { width: 50%;
    background-color: yellow;
}

table { 
    width: 100%;
    border-collapse: collapse;
    
}