关于表格table-layout:fixed属性的问题

定义和用法

tableLayout 属性用来显示表格单元格、行、列的算法规则。

• 固定表格布局：（table-layout: fixed）

1. 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
2. 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
3. 通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

• 自动表格布局：（table-layout: auto）

1. 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
   此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

• auto属性：

当设置为auto属性，也就是table-layout属性的时候，如果表格设置了width属性height属性，那么表格的宽度和高度就是设置的值。不管你是否设置了单元格的高宽值，表格的高宽都已经限定了！如果没有设定，那么表格宽度高度则为单元格宽高（包括一些padding、border属性等）累积的总和。

• fixed属性：

但是当设置了fixed属性的时候，如果表格设置了width属性height属性，如果设置的单元格宽高累加起来的总和比表格设置的宽高总和要大，那么表格的实际宽高就为每个单元格宽高累积的总和，但是如果单元格累积的总和比表格自己设计的要小，那么表格的宽高属性则为表格设置的宽高值。

2. 对表格设置table-layout:fixed属性以后，如果表格的第一行tr中的td设置过单元格合并，后面tr中的td无论如何设置宽度都没有任何效果，针对这个问题有如下两种解决方法

1.在表格的第一行设置一个隐藏的行如下:

<table style="table-layout: fixed; width:100%;">  
    <tr style="display:none">  
        <td width="30%"></td>  
        <td width="40%"></td>  
        <td width="30%"></td>  
    </tr>  
    <tr>  
        <td colspan="3">统计表</td>  
    </tr>  
    <tr>  
        <td>111</td>  
        <td>222</td>  
        <td>333</td>  
    </tr>  
</table> 

1. 在表格的tbody前插入col元素

<table>  
    <col style="width:100px"/>  
    <col style="width:200px"/>  
    <col style="width:300px"/>  
    <tbody>  
    <tr>  
        <td colspan="3">统计表</td>  
    </tr>  
    <tr>  
        <td>111</td>  
        <td>222</td>  
        <td>333</td>  
    </tr>  
    </tbody>