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 最新版
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
