設定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>

 

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