設置table中的寬度不隨文字改變讓其固定

設置table中的寬度不隨文字改變讓其固定

來源：互聯網做者：佚名時間：02-17 16:02:28【大 中 小】

頁面中table寬度設置width以後，寬度仍然不是固定的，文字太長後不換行，下面有個不錯的方法能夠有效解決這個問題

頁面中table寬度設置width="600px"以後，寬度仍然不是固定的，文字太長後不換行，把table都撐變形了。

解決辦法：

1.table 設置 寬度，絕對寬度和相對均可以

table-layout:fixed ;
設置了這個屬性，其他全部td都是相同的寬度。

這樣操做以後，table是寬度固定了，可是裏面的文章若是很長，文字會覆蓋

解決辦法：

在 td 裏面 加上 style="word-wrap:break-word;" 自動換行就行了，若是不想換行，能夠將超出內容設爲隱藏，而且用省略號代替：

在td上面加

複製代碼

代碼以下:

overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis;（目前僅在IE8測試經過）

 
推薦方法（2013-11-14 by 張雷）用div控制td的內容

在TD中加

（1）超過寬度和高度文字會自動隱藏

複製代碼

代碼以下:

 

<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

 

 

（2）設置了td的寬度超過長度自動換行

複製代碼

代碼以下:

<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> </td>