DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 設置table中的寬度不隨文字改變讓其固定
設置table中的寬度不隨文字改變讓其固定
編輯:HTML和Xhtml     
頁面中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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved