纯CSS,table的thead固定,tbody显示滚动条

以下代码，仅在谷歌下测试过

首先是html的table的代码：

   <table class="tablediv" id="myTable" border="1">
         <thead>
           <tr>
             <td class="wt40">111asdasdassd</td>
             <td class="wt50">222asdsa</td>
           </tr>
         </thead>
         <tbody id="tb">
           <tr>
             <td class="wt40">aaaaaaa23423d</td>
             <td class="wt50">bbbbb23w23sd</td>
           </tr>
           <tr>
             <td class="wt40">fdfffffffffffffsgdds</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
           <tr>
             <td class="wt40">aaaaaaa sd</td>
             <td class="wt50">bbbbbbb sd</td>
           </tr>
         </tbody>
       </table>

下面是css代码，

   table {
           margin:0 auto;
           border-collapse:collapse;
       }
       thead {
           background:#CCCCCC;
           display:block
       }
       tbody {
           height:100px;
           overflow-y:scroll;
           display:block
       }
       .wt40{
           width:300px;
       }
       .wt50{
           width:450px;
       } 

浏览器窗口比table宽的时候显示的是正常的，但是浏览器的宽度缩小的时候会出现thead和tbody对不齐的情况，如下图

之后，修改css如下，

 .wt40{
          width:300px;
          min-width:300px;
          max-width:300px;
      }
      .wt50{
          width:450px;
          min-width:450px;
          max-width:450px;
      } 

分别加上min-width和max-width之后，这个问题解决了。但是还有一个问题，那就是给table加上宽度（宽度大于tbody的）之后，滚动条就会右移，如图：

所以只要把table的width设置的比tbody就好了。