欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

前置條件：設(shè)定table寬度為固定值1000px，

1、當(dāng)里面的td總寬度和小于table寬度時(shí)，td寬度會(huì)被根據(jù)各個(gè)td寬度比例重新計(jì)算

<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，所以重新計(jì)算后的aaa寬度為153.84px，同理bbb:230.77px,ccc:338.45px,ddd:276.94px

2、當(dāng)里面td的寬度大于table寬度時(shí)，里面td的內(nèi)容一樣，但是設(shè)置寬度不一致時(shí)，會(huì)按比例計(jì)算各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、當(dāng)里面td的寬度大于table寬度時(shí)，但里面td的內(nèi)容不一樣，但是設(shè)置寬度不一致時(shí)，會(huì)按優(yōu)先按照內(nèi)容去劃分寬度，剩下的再比例計(jì)算各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寬度超出按比例分配的寬度，所以優(yōu)先按內(nèi)容分配，剩下的
aaa、bbb、ddd的寬度均按4/9, 2/9, 3/9的比例分配

4、當(dāng)前3個(gè)寬度超過1000px，ddd寬度沒有指定時(shí)，則ddd是根據(jù)內(nèi)容計(jì)算寬度，然后前3個(gè)在按照比例計(jì)算寬度

<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>

上面根據(jù)內(nèi)容計(jì)算ddd寬度為32.7px，aaa占比5/12，寬度為401.39,bbb占比1/4，寬度244.45,ccc占比1/3，寬度為322.48。（以上寬度為頁面測(cè)量的寬度，和實(shí)際計(jì)算的寬度有一丟丟偏差，不知道問題在哪里）

5、當(dāng)前3個(gè)寬度不足1000px時(shí)，ddd寬度未指定，則ddd寬度為直接補(bǔ)滿

<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、當(dāng)前2個(gè)寬度不足1000px時(shí)，ccc和ddd寬度未指定，則ccc和ddd寬度會(huì)根據(jù)內(nèi)容寬度計(jì)算比例，然后去計(jì)算剩余寬度

<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>

上面最后兩個(gè)ddd寬度均為250px

7、當(dāng)table的td寬度為固定值的時(shí)候即table被設(shè)置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會(huì)超出單元格并不會(huì)出現(xiàn)滾動(dòng)條，和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加一個(gè)div，設(shè)置寬度100%，over-flow:auto; 可以對(duì)aaa增加滾動(dòng)條。