html. fixed header with scrolling content

Ниже рецептик по созданию таблицы с зафиксированной шапкой с прокручиваемым содержимым.  Причем прокрутка появится только при условии превышения максимальной высоты, в нашем случае - max-height:100px

<div style="border: solid 1px black; width:300px;">
    <div>      
        <table style="width:100%; text-align:center;" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th style="width:100px;">Col#1</th>
                    <th style="width:100px;">Col#2</th>
                    <th>Col#3</th>
                </tr>
            </thead>
        </table>
    </div>
    <div style="max-height:100px; overflow-y:auto;">
        <table border="1" cellspacing="0" style="width:100%; text-align:center;">
            <tbody>  
                    <tr>
                        <td style="width:100px">11</td>
                        <td style="width:100px">12</td>
                        <td>13</td>
                    </tr>
                    <tr>
                        <td style="width:100px">21</td>
                        <td style="width:100px">22</td>
                        <td>23</td>
                    </tr>
                    <tr>
                        <td style="width:100px">31</td>
                        <td style="width:100px">32</td>
                        <td>33</td>
                    </tr>
                    <tr>
                        <td style="width:100px">41</td>
                        <td style="width:100px">42</td>
                        <td>43</td>
                    </tr>
                    <tr>
                        <td style="width:100px">51</td>
                        <td style="width:100px">52</td>
                        <td>53</td>
                    </tr>
                    <tr>
                        <td style="width:100px">61</td>
                        <td style="width:100px">62</td>
                        <td>63</td>
                    </tr>
                    <tr>
                        <td style="width:100px">71</td>
                        <td style="width:100px">72</td>
                        <td>73</td>
                    </tr>
                    <tr>
                        <td style="width:100px">81</td>
                        <td style="width:100px">82</td>
                        <td>83</td>
                    </tr>
            </tbody>  
        </table>
    </div>  
</div>