html中表格tr的td單元格怎麼設定寬度屬性

table的寬度是自適應的，而且部分TD是固定寬度。原則上應該講table的寬度設定成一個固定的值，而不應該設定成一個根據螢幕變化的值。現在來看看如何設定表格td儲存格的寬度。

範例1：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的寬度是根據內容出現寬度的，然後前兩個再按照比列計算寬度。

 例2：前兩個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>

 例3：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>

#

以上是html中表格tr的td單元格怎麼設定寬度屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！