table{ table-layout: fixed; } td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
原理：
本方法用於解決表格單元格內容過多時的美觀問題，主要涉及到4句CSS樣式：
1. table-layout: fixed 由於table-layout的默認值是auto，即table的寬高將取決於其內容的多寡，如果內容的體積無法估測，那么最終表格的呈現形式也無法保證了，fixed一下就好了。（注意：此樣式是關鍵）
2. white-space: nowrap 是為了保證無論單元格（TD）中文本內容有多少，都不會自動換行，此時多余的內容會在水平方向撐破單元格。
3. overflow: hidden 隱藏超出單元格的部分。
4. text-overflow: ellipsis 將被隱藏的那部分用省略號代替。
效果圖：
源代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> table { table-layout: fixed; width: 100%; } td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #ccc; } </style> </head> <body> <table> <thead> <th> 第一列 </th> <th> 第二列 </th> </thead> <tbody> <tr> <td> <span>超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容</span><span>超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容</span> </td> <td> 超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容超長內容 </td> </tr> </tbody> </table> </body> </html>
兼容性：
Internet Explorer 6, 7, 8, 9及以上版本
FireFox 最新版
Chrome 最新版