首頁  >  文章  >  web前端  >  html中表格tr的td單元格怎麼設定寬度屬性

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

anonymity
anonymity原創
2019-04-28 09:22:2335588瀏覽

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

html中表格tr的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單元格怎麼設定寬度屬性

#

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:css什麼意思?下一篇:css什麼意思?