? 前言：一直總覺得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>

?

?

?

轉載于:https://www.cnblogs.com/cainiaoguoshi/p/3303156.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的table td的宽度详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。