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