css table布局介绍

骑猪看日落 2021-05-12 11:50 538阅读 0赞

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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

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

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

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

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

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

看一个例子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/c7aabc8792f74f6aaf1c4921a975b432.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20210511/6b4ff917c21a4e2fbd0b216b003cc517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20210511/76347251743a49a7b6002927fd376976.png