<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>