table td的寬度詳解

  前言：一直總覺得td的寬度好難駕馭，但萬事萬物總是有規律的。就像亮劍說的：不用因為怕八路就敬而遠之，應該靠上去，熟悉他們，了解他們。

  正文：

          Table只有Table的寬度是可以設置的，並且各個瀏覽器理解一致

• 原則上應該講table的寬度設置成一個固定的值，而不應該設置成一個根據屏幕變化的值
• Table的寬度為600px,Table的td所有寬度總和不到600px,瀏覽器會自動按照td的寬度的比例算出寬度

  <table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 200px;">我是200px</td>
               <td style="width: 200px;">我也是200px</td>
            </tr>
        </table>

       運行結果：兩個td都是300px;

• Table的寬度為600px,前兩個td的寬度已經為600px,那么第三個td的寬度沒有指定，這樣的話第三個td的寬度是根據內容出現寬度的，然后前兩個再按照比列計算、

        前兩個td小於table寬度，那么最后一個td就起到補全的作用

  <table style="width: 600px;border-collapse: collapse;" >
            <tr>
                <td style="width: 300px;">我是200px</td>
                <td style="width: 300px;">我也是200px</td>
                <td >我是根據內容的</td>
            </tr>
        </table>

 

•  Table中的td內，如果放置塊狀元素超過td的寬度，並且table的table-layout: fixed;(fixed表示td的寬度是定長的，不隨td內容變化而變化)。

         這樣盡量不要再td里寫overflow: auto;  因為這樣在IE6,7不會出現滾動條的，最好的辦法是套一個div，寬度設置成100%

        

<table style="width: 600px;border-collapse: collapse;table-layout: fixed;" >
            <tr>
                <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td>
               <td >我是自由寬度</td>
            </tr>
        </table>