利用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>
表格高度的分配方式与表格宽度的分配方式大体一致,都是找到表格内容宽度的最大值,然后进行高度分配,超出表格高度时与低于表格高度时,分配原则完全与宽度分配原则一致。