为什么我的thead 和tbody不能宽度相等？

<div style="width:1000px; height:50px; overflow-y:scroll;"id="aa" >
  <table style="width:100%;border:1px solid red">
     <thead>
       <tr>
         <th>姓名</th>
         <th>性别</th>
         <th>年龄</th>             
       </tr> 
     </thead>
  </table> 
</div>
 <div  style="width:1000px; height:80px; overflow-y:scroll;" id="bb">   
    <table style="width:100%;border:1px solid yellow">   
        <tbody >
        <tr>
            <td>mary</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr>
            <td>tom</td>
            <td>men</td>
            <td>20</td>
        </tr>
        <tr>
            <td>jack</td>
            <td>men</td>
            <td>30</td>
        </tr>
        <tr>
            <td>cc</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr>
            <td>aa</td>
            <td>女</td>
            <td>20</td>
        </tr>
        </tbody>
    </table>
</div>  
<script>
$(function(){     
       $("#aa  table").children("thead").find("th").each(function(){ 
        var idx = $(this).index();         
        var td=$('#bb table').children('tbody').children('tr:first').children('td').eq(idx);

        $(this).width() > td.width() ? td.width($(this).width()) : $(this).width(td.width());     }); 
        
        }); 
</script>

为什么表头和tbody宽度不相等？

---

其实我只想知道tbody跟thead为什么不放一个table里

代码在我这里是显示宽度一样的