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宽度布局

标签：target   stand   ble   换行   元素   没有   显示   结束   pac   

原文地址：http://www.cnblogs.com/anniey/p/7026772.html