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;來進行換行