狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

1、當(dāng)里面的td總寬度和小于table寬度時，td寬度會被根據(jù)各個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、當(dāng)里面td的寬度大于table寬度時，里面td的內(nèi)容一樣，但是設(shè)置寬度不一致時，會按比例計算各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寬度時，但里面td的內(nèi)容不一樣，但是設(shè)置寬度不一致時，會按優(yōu)先按照內(nèi)容去劃分寬度，剩下的再比例計算各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個寬度超過1000px，ddd寬度沒有指定時，則ddd是根據(jù)內(nèi)容計算寬度，然后前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>

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

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

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