<html> <head> <meta charset="utf-8"> <style type="text/css"> /*所有內容都在這個DIV內*/ div.all { border: 3px solid #FF00FF; width: 80%; clear: right; } /*表頭在這個DIV內*/ div.title { width: 100%; } /*內容在這個DIV內*/ div.content { width: 100%; overflow: scroll; /*總是顯示滾動條*/ overflow-x: hidden; /*去掉橫向滾動條*/ height: 100px; } div.title_left { float: left; margin-right: 17px; } div.content_left { float: left; } .main_table { width: 100%; border: 1px solid #FF00FF; border-collapse: collapse; /*邊線與旁邊的合並*/ table-layout:fixed; text-align: center; } .main_table tr th { border: 1px solid #FF00FF; overflow: hidden; /*超出長度的內容不顯示*/ word-break: break-all; /*字內斷開*/ text-overflow: ellipsis; /*當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最后一個字符*/ white-space: nowrap; } /*單元格樣式*/ .main_table tr td { border: 1px solid #FF00FF; overflow: hidden; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body> <div class="all"> <div class="title"> <div class="title_left"> <table class="main_table"> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </table> </div> </div> <div class="content"> <div class="content_left"> <table class="main_table"> <tr> <td>張三</td> <td>21</td> <td>男</td> </tr> <tr> <td>李四</td> <td>35</td> <td>男</td> </tr> <tr> <td>李紅</td> <td>18</td> <td>女</td> </tr> <tr> <td>王五</td> <td>20</td> <td>男</td> </tr> <tr> <td>李飛</td> <td>33</td> <td>男</td> </tr> <tr> <td>張薇</td> <td>23</td> <td>女</td> </tr> <tr> <td>三毛</td> <td>24</td> <td>男</td> </tr> <tr> <td>鵬子</td> <td>13</td> <td>男</td> </tr> <tr> <td>黃一</td> <td>26</td> <td>女</td> </tr> <tr> <td>管理</td> <td>28</td> <td>男</td> </tr> </table> </div> </div> </div> </body> </html>