關於table設定固定寬度高度自適應

2021-07-16 23:48:38 字數 1091 閱讀 4440

標籤:

分類:計算機-開發-指令碼

web應用的頁面,**的表現形式是常常遇到的,在列數有限的前提下,如何將各列中的內容自適應到不同解析度的螢幕,這應該是乙個比較容易遇到的問題,下面就來談一談我對這類問題的解決與看法。

將所有列設定為固定寬度,顯然是不能滿足此類要求的,但是若把全部的列都設定為百分比,恐怕在某些尺寸,或解析度下,會變得很難看。在bigtree看來,比較習慣於用如下的方式來處理——在**列數不是很多的前提下——將大部分列寬用固定值設定死,留下一列不設定寬度,將table的寬度設定為螢幕的百分比(譬如95%、98%等)。

例:

width="95%"border="1" cellpadding="2" cellspacing="1"> 序號

分類a分類b

名稱說明操作 

……

在本例中,名為「說明」的列,內容比較長,個人認為可以將此列設定為浮動寬度列,用以自適應頁面的寬度。

但是當該**中出現長度比列幅寬的半形字元時,td的寬度會被內容撐破,應該如何解決呢?

解決此問題的方法是:在明細行的td中,追加

style="word-wrap:break-word;",這樣做可以使半形連續字元強制換行,不至於撐破列寬。

例:

style="word-wrap:break-word;"> ……

應用此方法,針對設定了width寬度的td列可以解決,但是如果沒有設定寬度的td列,是無法生效還是會被撐破td的,應該如何解決呢?

解決此問題的方法是:在定義**時,追加

style="table-layout:fixed;",這樣做可以使半形連續字元強制換行,不至於撐破列寬。需要注意的是,使用此引數後,

不要輕易在tr(行)或td(列)中加入height屬性,會使table不再被內容撐出適合的高度。

例:

style="table-layout:fixed;"> ……

table固定寬度與自動寬度

對table和td th指定的寬度無效,瀏覽器會計算所有單元格的內容寬度才能得出一列寬度 如果想對單元格的內容自動折行需使用word wrap break word word break break all 如果只對table指定寬度,則各單元格的寬度 table寬度 單元格數量 如果單元格宣告的寬...

table設定列寬度

首先貼資料,相信大家看了基本就了解了 tablelayout 屬性用來顯示 單元格 行 列的演算法規則。固定 布局 固定 布局與自動 布局相比,允許瀏覽器更快地對 進行布局。在固定 布局中,水平布局僅取決於 寬度 列寬度 邊框寬度 單元格間距,而與單元格的內容無關。通過使用固定 布局,使用者 在接收...

table內容超出固定寬度顯示點點點,寬度自適應

1.這是js 滑鼠懸停顯示全部隱藏的內容 inithovertitle 使用說明 引數 id的名稱字串格式,td的要顯示全部的class名稱字串格式 table必須新增類.table ellipsis,td必須新增class為.td ell td內容用 內容 巢狀 param idname para...