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>
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

<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>
  
  
1
2
3
4
5
6
7
8
9
10
11

      在浏览器中渲染后，用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>
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

           

浏览人工智能教程