table中表头不动，表体产生滚动条

<div id="elec_table">
 2     <div class="table-head">
 3     <table>
 4         <tr>
                <td>姓名</td><td>用途</td>
            </tr>
11     </table>
12     </div>
13     <div class="table-body">
14     <table>
15            <tr><td>1</td><td>我只是用来测试的</td></tr>
18             <tr><td>2</td><td>我只是用来测试的</td></tr>
19             <tr><td>3</td><td>我只是用来测试的</td></tr>
20             <tr><td>4</td><td>我只是用来测试的</td></tr>
21             <tr><td>5</td><td>我只是用来测试的</td></tr>
22             <tr><td>6</td><td>我只是用来测试的</td></tr>
23             <tr><td>7</td><td>我只是用来测试的</td></tr>
24             <tr><td>8</td><td>我只是用来测试的</td></tr>
25             <tr><td>9</td><td>我只是用来测试的</td></tr>
26             <tr><td>10</td><td>我只是用来测试的</td></tr>
27             <tr><td>11</td><td>我只是用来测试的</td></tr>
28             <tr><td>12</td><td>我只是用来测试的</td></tr>
29             <tr><td>13</td><td>我只是用来测试的</td></tr>
30             <tr><td>14</td><td>我只是用来测试的</td></tr>
31             <tr><td>15</td><td>我只是用来测试的</td></tr>
33     </table>
34     </div>
35 </div>                

使用两个table标签，使用3个div，最外层的为全局容器，一个是表头容器，另一个是表体容器。

css如下：

/*外层容器设置高*/
#elec_table{
    position:relative;
    height:600px;
    table-layout : fixed;
}
.bodyBox{
    overflow-y:auto;
    overflow-x:hidden;
    height:570px;
}
/*设置table-layout:fixed固定宽度，表头和表体需要对齐*/
table{
    table-layout:fixed;
}
/*设置单元格的宽度，可能会出现内容长需要换行的情况 使用white-space:normal，每个单元格都是一样的宽度*/
#elec_table td{
    20%;
    white-space:normal;
}

注意点：

1.最外侧的div，需要用overflow-x来控制最横向滚动，因为overflow-x、y在IE中存在兼容性问题，当overflow-x/overflow-y其中之一被设置成'scroll'、'auto'、'hidden'时，另一个还是'visible'，不会被设置为'auto' 所以，最好使用 "overflow-x:scroll; overflow-y:auto",这时候，右边的在需要时才会显示。如果希望右边的滚动条一直不显示，那么，可以使用："overflow-x:scroll; overflow-y:hidden;" 

2.表头和表体的各列需要对齐，所以可以用table-layout:fixed;来固定宽度 

3.当用table-layout:fixed;固定了列宽度，也就会有长的内容会显示不全，那么可以用white-space:normal;来进行换行