小伙伴們有沒有的遇到頁面顯示時，因為數據太長導致顯示的表格某一列過長，從而導致頁面的不美觀，下面我們來看一看如何用Css樣式解決表格超出部分用省略號顯示的問題。
主要設置兩個樣式：
1 table{ 2 table-layout: fixed; ==>固定布局的算法。在這種算法中，表格和列的寬度取決於col對象的寬度總和，假如沒有指定，則會取決於第一行每個單元格的寬度。
假如表格沒有指定寬度( width )屬性，則表格被呈遞的默認寬度為 100% （注意：此樣式是關鍵） 3 td{ 4 white-space: nowrap; ==>設置內容抵達容器邊界會不會轉到下一行 5 overflow: hidden; ==>不顯示超過對象尺寸的內容（這個絕對不能少）,也就是說設置td里面的數據無論有多少，都不會換行 6 text-overflow: ellipsis; ==>將被隱藏的那部分用省略號代替。 7 }
源代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style type="text/css"> 5 table 6 { 7 table-layout: fixed; 8 width: 100%; 9 } 10 td 11 { 12 white-space: nowrap; 13 overflow: hidden; 14 text-overflow: ellipsis; 15 background-color: #ccc; 16 } 17 </style> 18 </head> 19 <body> 20 <table> 21 <thead> 22 <th> 23 第一列 24 </th> 25 <th> 26 第二列 27 </th> 28 </thead> 29 <tbody> 30 <tr> 31 <td> 32 <span>超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容</span><span>超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容</span> 33 </td> 34 <td> 35 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 36 </td> 37 </tr> 38 </tbody> 39 </table> 40 </body> 41 </html>
效果圖：
這樣就解決了帶表格的頁面不美觀的問題，希望可以幫助到大家！