現象：

下圖中第二列的內容被遮住了，雖然td有width，但還是撐出外層容器了。 table中td設定width有時，使用屬性width方式，或者在td加style都不能生效。

程式碼：

	 <style>
    table,tr,td{
        border: 1px solid rebeccapurple;
    }
    td{
        padding: 14px;
        /* word-break: break-all; */
    }
    </style>

    <div style="width:500px;height:150px;overflow: hidden;background: powderblue;">
        <table>
            <tr>
                <td width="100px">abc</td>
                <td width="600px">測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度測試名字長度end</td>
            </tr>
            <tr>
                <td><div style="background:plum;width:150px">a</div></td>
                <td>babcdefghijklmnopqrstyvwxyzabcdeijklabcdefghijklmnopqrstyvwxyzabcdeijkl</td>
            </tr>
        </table>
    </div> 
 

分析

將第二行的內容改為‘b’，表格內容顯示正常如下圖。

分析原因： table總寬度根據所有td的寬度撐開，而每個td寬度由最長的決定。 而td的屬性word-break:normal; 在中文時會自動換行，在一串英文字元時就無法換行，也就出現將td的寬度撐大的問題。 （將第二行的內容換為一段英文單詞便也會自動換行）

word-break: normal|break-all|keep-all;

解決方法：

方案1. 在td上加word-break: break-all;

附： 在解決這個問題時，發現了一個方案，也是一種很有啟發的解決width的方法：table-layout : fixed 可參考：https://www.jianshu.com/p/0b027c877a0d