css table布局介绍

table表格控件可以通过table-layout属性来设置其布局，该属性有三个值：auto、fixed。

• auto：默认行为，表格及单元格的宽度取决于其包含的内容，不可控性大，而且渲染速度较慢。
• fixed：水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。表格的宽度由表格所设定的宽度和第一行所有列的宽度决定，渲染速度较快。

一些示例：

1）table-layou=fixed，如果放置块状元素超过td的宽度，如何设置滚动条？

这时尽量不要在td里写overflow: auto; 因为这样在IE6,7不会出现滚动条的，最好的办法是套一个div，宽度设置成100%，别切设置overflow:auto。如下：

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
 <tr>
   <td style="width: 200px;">
    <div style="width: 100%;overflow: auto;">
       <div style="width: 300px;height: 100px;background-color: red;"></div>
    </div>
   </td>
   <td >我是自由宽度</td>
 </tr>
</table>

这样，在单元格中会出现一个滚动条。

2）table-layou=fixed，如果单元格内容过长，如何设置自动换行？

table表格中的内容如果是中文，一般情况下都会自动换行。但如果内容是英文或数字（url），内容过长时文字会飘到单元格之外，也就是内容不会自动换行。例如：

这时通过设置属性word-wrap:break-word;和word-break:break-all;一起使用，可以做到内容自动换行的效果。

word-wrap属性：允许长单词或 URL 地址换行到下一行（是否允许换行）

• normal    只在允许的断字点换行（浏览器保持默认处理）。
• break-word    在长单词或 URL 地址内部进行换行。

word-break 属性规定自动换行的处理方法（自动换行的方法）：

• normal    使用浏览器默认的换行规则。
• break-all    允许在单词内换行。
• keep-all    只能在半角空格或连字符处换行。

看一个例子：

<table style="width:800px;table-layout: fixed;" >
	<tr>
		<td style="width:80px">test</td>
		<td style="width:720px;word-wrap: break-word;word-break:break-all;" >
		...超长内容...
		</td>
	</tr>
</table>