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定義的寬帶是默認寬度，實際寬度由內容決定。