實現效果圖：
重點：首先要實現table中td的縱列顯示，此時需要css 中的display:block屬性，其次要實現tr的並排顯示，此時需要float:left屬性
難點：多個tr 的寬度可能大於table的寬度，此時需要設定table寬度足夠大，並且在table外面添加一個div，設定div的overflow:scroll
實現代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/file.css" type="text/css" rel="stylesheet" /> </head> <body> <div id='label'> <table> <thead> <th>機構號</th> <th>名稱</th> <th>電話號碼</th> <th>負責人</th> <th>負責人電話</th> <th>地址</th> <th>附近車站</th> </thead> </table> </div> <div id="content"> <table> <tbody> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> <tr> <td>0001</td> <td>總行營業部</td> <td>88888888</td> <td>John</td> <td>18688888888</td> <td>長江中路103號</td> <td>長江中路東口</td> </tr> </tbody> </table> </div> </body> </html>
#content{ width: 50%; overflow: scroll; float: left; } table{ display: block; width: 3000px; } thead{ display: block; float: left; width: 90px; } tbody{ display: block; float: left; } th{ display: block; border: 1px black solid; } td{ display: block; border: 1px black solid; } tr{ display: block; float: left; }