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;来进行换行