html中表格tr的td單元格如何設置寬度屬性

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單元格如何設置寬度屬性大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。