🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 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 属性")