Table的思索(一):TD宽度与高度的分配

      利用table进行布局时，一行TD的宽度之和一定会大于等于Table设定的宽度值。

      表格的实际宽度依赖于表格的布局样式table-layout，将table-layout设置为auto时，表格会依次计算出所有表格的实际宽度，然后计算每行的表格宽度之和，最大者即为表格的宽度，同时计算出来还有每列的宽度，亦即每列表格中的最大宽度。

<!-- 对表格设置的宽度无效，会被表格计算出的宽度覆盖 -->
<table style="width:100px;" border="1px">
    <tr>
        <td>
            <!-- 第一列的最大宽度 -->
            <div style="width:200px;">TEST-A</div>
        </td>
        <td>AA</td>
    </tr>
    <tr>
        <td>TEST-A</td>
        <td>
            <!-- 第二列的最大宽度 -->
            <div style="width:100px;">TEST-B</div>
        </td>
    </tr>
</table>

      上面阐述了表格的实际内容宽度大于表格宽度，再看观察一下表格宽度大于实际内容宽度，并采用百分比计算，会有很多有意思的发现。

<table style="width:100px;" border="1px">
    <tr>
        <!-- 表格的宽度为50px，而不是20px -->
        <td style="width:20%;"><div>TA</div></td>
        <td>TB</td>
    </tr>
    <tr>
        <td>TA</td>
        <td style="width:20%;"><div>TB</div></td>
    </tr>
</table>

      在浏览器中渲染后，用WEB开发工具(Chrome Developer DevTools)观测每个对象的宽度，发现每个表格都为50px,而不是20px，这是因为表格在布局完成后，会将多余的空间按比例均匀地分布给每个表格，也就是说，如果两个表格的内容宽度完全一样，谁的预设宽度大，谁分配的剩余空间就多。

      需要指出的是，在表格布局方式table-layout为auto时，即使设置了比例，也会优先按表格的内容进行布局，所以会出现占比较小的表格反而占据了更大的宽度，如下。

<table style="width:100px;" border="1px">
    <tr>
        <!-- 20%宽度的表格实际占据的宽度大于120%的表格-->
        <td  style="width:20%">
            <div>TAAAAAAAA</div>
        </td>
        <!-- 表格内容宽度小于表格宽度时，会优先分配剩余空间 -->
        <td style="width:120%">TB</td>
    </tr>
    <tr>
        <td>TA</td>
        <td><div>TB</div></td>
    </tr>
</table>

      表格高度的分配方式与表格宽度的分配方式大体一致，都是找到表格内容宽度的最大值，然后进行高度分配，超出表格高度时与低于表格高度时，分配原则完全与宽度分配原则一致。