CSS設定表格TD寬度布局

標籤：target   stand   ble   換行   元素   沒有   顯示   結束   pac   

　　使用表格版面配置時，對儲存格的寬度控制很傷腦筋，所以查閱資料整理如下：

一、表格版面配置table-layout

　　文法：
　　　　table-layout : auto | fixed

　　取值：

　　　　auto  : 大多數瀏覽器採用自動表格版面配置演算法對錶格布局；表格及儲存格的寬度取決於其包含的內容。

　　　　fixed ：表格和列的寬度通過表格的寬度來設定，某一列的寬度僅由該列首行的儲存格決定；在當前列中，該儲存格所在行之後的行並不會影響整個列寬。

　　**注意**

　　　　使用 “fixed” 布局方式時，整個表格可以在其首行被下載後就被解析和渲染。

　　　　這樣對於 “automatic” 自動布局方式來說可以加速渲染，但是其後的儲存格內容並不會自適應當前列寬。

　　　　任何一個包含溢出內容的儲存格可以使用 overflow  屬性控制是否允許內容溢出。

二、儲存格文字控制

　　1.white-space

　　　　該屬性是用來設定如何處理元素中的空白

　　　　文法：

　　　　　　white-space : normal | pre | nowrap | inherit
　　　　取值：
　　　　　　normal : 預設值；文本自動處理換行；假如抵達容器邊界內容會轉到下一行；

　　　　　　pre      : 連續的空白符會被保留，在遇到分行符號或者<br>元素時才會換行；

　　　　　　　　　　  換行和其他空白字元都將受到保護；
　　　　　　　　　　  這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支援；

　　　　　　　　　　  如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用；結果等同於 normal ；

　　　　　　nowrap : 連續的空白符會被合并，強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象；

　　2.word-break

　　　　該屬性指定了怎樣在單詞內斷行

　　　　文法：
　　　　　　word-break : normal | break-all | keep-all

　　　　取值：

　　　　　　normal   : 依照亞洲語言和非亞洲語言的文本規則，允許在字內換行 ；

　　　　　　break-all: 對於non-CJK (中文/日文/韓文) 文本，可在任一字元間斷行 ；

　　　　　　keep-all : CJK 文本不斷行；

　　　　　　　　　　　Non-CJK 文本表現同 normal（與所有非亞洲語言的normal相同；對於中文，韓文，日文，不允許字斷開；

　　　　　　　　　　　適合包含少量亞洲文本的非亞洲文本與之間的高度解決辦法）；

三、表格寬度綜合處理

　　1.css固定table td的寬度（預設顯示）

1 table{table-layout: fixed;}2 <th style="width:63px" ></th>3 td{white-space: normal;} 

　　2.css固定table td的寬度（一行顯示）

table{table-layout: fixed;}<th style="width:63px" ></th>td{white-space: nowrap; overflow:hidden;word-break:break-all;} /*防止換行*/ 

四、CSS設定文本強制換行和不換行寫法（題外）

　　1.不轉行

 .text{overflow:hidden;white-space：normal;}

　　2.強行換行

.text{word-break: normal;}

五、本文涉及連結

　　https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

　　https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

　　https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

CSS設定表格TD寬度布局