table表格寬帶研究（附帶：table表格為什么設置td寬度無效）

情況1：下面代碼定義了表格寬帶為為600px，未設置td寬帶，3個td內容為1,2,3，可以看到3個內容平分table的寬度。

也就是每個td都是200px（請注意：如果用chrome調試寬度，會有一定的誤差，因為600px還包括邊框，因此實際寬度可能是198px，這里進行了簡化，下同）。

 <table style="width:600px; background-color:red" >
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>        

        </table>

 

 

接下來，修改第一個td的內容，將1修改為11，則結果變成如下：

因為：第一個單元格的“11”是2個字符寬帶，第二個單元格“2”是一個字符寬帶，第三個單元格“3”是一個字符寬帶。

共計是4個字符寬帶，因此，比例為 2:1:1. 所以 第一個單元格是：600*2/4=300px. 第2和第3都是 600*1/4=150px寬度

 

如果第一個內容過長，默認會稱高表的高度，而不是延長表的高度（可以通過在td里放置div來延長寬度，見本文最后），

如下圖，表格已經定義為600px，第一個td內容已經大於600px

此時，表格並不會讓寬大於600px，td會通過換行來顯示td內容。其余各單元格仍然按內容的比例同分table寬度。

下圖顯示，單元格1和單元格2均分表格剩余寬度。

 

總之，一個結論：如果不設置td寬帶，各單元格會根據各個內容長度的比例來均分table的寬度。

 

 

情況2：

定義的表格寬帶為600，但是第一和第三的寬度之和已經大於600px了。

此時，系統會先計算第二個實際的寬度，假設第二個是40px，然后第一和第三再按比例均分剩余寬度。

 

 <table style="width:600px; background-color:blue" >
            <tr>
                <td width="400px"> 1

                </td> 
                <td  >
                   222222
                </td>
                <td width="400px">3</td>
            </tr>        

        </table>

 

 

情況3：如果td寬度不足，則不足會自動補齊。下圖中，第一個100px，第三個200px，第二個td自然是：600-100-200=300px

<table style="width:600px; background-color:blue" >
            <tr>
                <td width="100px"> 1

                </td> 
                <td  >
                   222222
                </td>
                <td width="200px">3</td>
            </tr>        

        </table>

 

 

情況4：百分比和數字同時使用，百分比優先級高

 

  <table style="width:600px; background-color:blue" >
            <tr>
                <td width="200px"> 1

                </td> 
                <td width="50%"  >
                   2
                </td>
                <td width="200px">3</td>
            </tr>        

        </table>

 

上面代碼計算td2寬帶有兩種方法：（1）因為td1是200，td3是200px，td2則是600-200-200=200，在計算50%，則td2的寬帶應該是 100px

（2）td2的50%是table的一半，所以，td2的寬帶是300. 然后td1和td3按比例1:1均分剩余的300，那么哪個計算是正確的呢？

運行一下，效果如下，第二個方法是正確的。

 

  

情況5：

   <table style="width:600px; background-color:blue" >
            <tr>
                <td width="100px"> 
                    <div style="width:400px"> 
                      1
                    </div>
                </td> 
                <td  >
                     2
                </td>
                <td>3</td>
            </tr>        

        </table>

 

雖然td定義的是100px，但是里面的div設置為400px，也就是說，如果td內容是純文本，超過100px會在td里換行

但是，如果td里div設置了寬度，則會撐寬td的默認值。

結論：td定義的寬帶是默認寬度，實際寬度由內容決定。