CSS table-layout 屬性 · W3School CSS 參考手冊

# CSS table-layout 屬性 ## 實例設置表格布局算法： ``` table { table-layout:fixed; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有瀏覽器都支持 table-layout 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 tableLayout 屬性用來顯示表格單元格、行、列的算法規則。 ### 固定表格布局：固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。 ### 自動表格布局：在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。此算法有時會較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內容。 ### 說明該屬性指定了完成表布局時所用的布局算法。固定布局算法比較快，但是不太靈活，而自動算法比較慢，不過更能反映傳統的 HTML 表。 | 默認值： | auto | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.tableLayout="fixed" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | automatic | 默認。列寬度由單元格內容設定。 | | fixed | 列寬由表格寬度和列寬度設定。 | | inherit | 規定應該從父元素繼承 table-layout 屬性的值。 | ## TIY 實例 [設置表格的布局](/tiy/t.asp?f=csse_table_table-layout) 本例演示如何設置表格的布局。 ``` <html> <head> <style type="text/css"> table.one { table-layout: automatic } table.two { table-layout: fixed } </style> </head> <body> <table class="one" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br /> <table class="two" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 表格](/css/css_table.asp "CSS 表格") HTML DOM 參考手冊：[tableLayout 屬性](/jsref/prop_style_tablelayout.asp "HTML DOM tableLayout 屬性")