待解決問題

想要讓這個圖片的第一條記錄和其他其他兩條記錄的高度一直 （定寬度預先設定好了）

理想效果（需求）

就是每個欄位的值太長顯示不了可以自動…隱藏起來，只顯示那麼高，不會有另外起一行的變化。

測試有效的解決方法

方法一

在每個<td>裡面新增一個<div>，如下

<td>
	<div style="height:20px; overflow:hidden; text-overflow: ellipsis;">
		欄位內容
	</div>
</td>

td {
    /* 保證資料不會擠爆拉長表格寬度，到點就換行 */
 

    word-break: break-all; 
}

1. height: 20px;　　　　/* 固定了單元格的高度，此處用％無效 */
2. overflow: hidden; 　/* 表示如果欄位太長的，多餘部分不顯示，也沒有… */
3. text-overflow: ellipsis; 　/*多餘的用省略號(ellipsis是省略的意思)顯示 */

方法二

table樣式設定為固定，而且欄位長不允許換行

table {
    table-layout: fixed;
    white-space: nowrap;
}

td {
    overflow
 
: hidden;
    text-overflow: ellipsis;
}

1. table-layout: fixed;　/* 固定表格樣式，即記錄行的單元格大小高度和<th>標題的一樣，無需另外設定高度 */
2. white-space: nowrap;　/* nowrap表示不會另外換行，規定段落中的文字不進行換行 */

方法三

js擷取長度

不做深入介紹，推薦方法二