91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

前置條件：設定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增加滾動條。