table的td宽度计算规则

table的td宽度计算规则

前置条件：设定table宽度为固定值1000px，

1、当里面的td总宽度和小于table宽度时，td宽度会被根据各个td宽度比例重新计算

<table style="width: 1000px;">
    <tr>
        <td style="width: 100px;">aaa</td>
        <td style="width: 150px;">bbb</td>
        <td style="width: 220px;">ccc</td>
        <td style="width: 180px;">ddd</td>
    </tr>
</table>

上面aaa占比100/(100+150+220+180)=0.15384，所以重新计算后的aaa宽度为153.84px，同理bbb:230.77px,ccc:338.45px,ddd:276.94px

2、当里面td的宽度大于table宽度时，里面td的内容一样，但是设置宽度不一致时，会按比例计算各td宽度

<table style="width: 1000px;">
    <tr>
        <td style="width: 400px;">aaa</td>
        <td style="width: 200px;">bbb</td>
        <td style="width: 200px;">ccc</td>
        <td style="width: 300px;">ddd</td>
    </tr>
</table>

aaa、bbb、ccc、ddd的宽度均按4/11, 2/11, 2/11, 3/11的比例分配

3、当里面td的宽度大于table宽度时，但里面td的内容不一样，但是设置宽度不一致时，会按优先按照内容去划分宽度，剩下的再比例计算各td宽度

<table style="width: 1000px;">
    <tr>
        <td style="width: 400px;">aaa</td>
        <td style="width: 200px;">bbb</td>
        <td style="width: 200px;">cccccccccccccccccccccccccccccccccccccccccccccccccccccccc</td>
        <td style="width: 300px;">ddd</td>
    </tr>
</table>

显然ccc宽度超出按比例分配的宽度，所以优先按内容分配，剩下的
aaa、bbb、ddd的宽度均按4/9, 2/9, 3/9的比例分配

4、当前3个宽度超过1000px，ddd宽度没有指定时，则ddd是根据内容计算宽度，然后前3个在按照比例计算宽度

<table style="width: 1000px;">
    <tr>
        <td style="width: 500px;">aaa</td>
        <td style="width: 300px;">bbb</td>
        <td style="width: 400px;">ccc</td>
        <td>ddd</td>
    </tr>
</table>

上面根据内容计算ddd宽度为32.7px，aaa占比5/12，宽度为401.39,bbb占比1/4，宽度244.45,ccc占比1/3，宽度为322.48。（以上宽度为页面测量的宽度，和实际计算的宽度有一丢丢偏差，不知道问题在哪里）

5、当前3个宽度不足1000px时，ddd宽度未指定，则ddd宽度为直接补满

<table style="width: 1000px;">
    <tr>
        <td style="width: 200px;">aaa</td>
        <td style="width: 300px;">bbb</td>
        <td style="width: 400px;">ccc</td>
        <td>ddd</td>
    </tr>
</table>

以上ddd宽度为100px

6、当前2个宽度不足1000px时，ccc和ddd宽度未指定，则ccc和ddd宽度会根据内容宽度计算比例，然后去计算剩余宽度

<table style="width: 1000px;">
    <tr>
        <td style="width: 200px;">aaa</td>
        <td style="width: 300px;">bbb</td>
        <td>ccc</td>
        <td>ddd</td>
    </tr>
</table>

上面ccc为221.81px，ddd为278.19px

<table style="width: 1000px;">
    <tr>
        <td style="width: 200px;">aaa</td>
        <td style="width: 300px;">bbb</td>
        <td>ddd</td>
        <td>ddd</td>
    </tr>
</table>

上面最后两个ddd宽度均为250px

7、当table的td宽度为固定值的时候即table被设置css属性table-layout:fixed;

<table style="width: 1000px;table-layout: fixed;">
    <tr>
        <td style="width: 10px;">aaa</td>
        <td style="width: 300px;">bbb</td>
        <td style="width: 300px;">ccc</td>
        <td style="width: 390px;">ddd</td>
    </tr>
</table>

上面aaa会超出单元格并不会出现滚动条，和bbb重叠

解决：

<table style="width: 1000px;table-layout: fixed;">
    <tr>
        <td style="width: 10px;">
            <div style="width: 100%;overflow: auto;">aaa</div>
        </td>
        <td style="width: 300px;">bbb</td>
        <td style="width: 300px;">ccc</td>
        <td style="width: 390px;">ddd</td>
    </tr>
</table>

给aaa加一个div，设置宽度100%，over-flow:auto;可以对aaa增加滚动条