前端

表格布局 | table-layout (Miscellaneous Level 2) – CSS 中文开发手册 – Break易站

云博小周宇1 Min Read 
  • ??CSS 中文开发手册

    表格布局 | table-layout (Miscellaneous Level 2) – CSS 中文开发手册

    该table-layoutCSS属性指定用于铺陈算法<table>单元格，行和列。

    /* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

    Initial value

    auto

    应用对象

    table and inline-table elements

    是否可继承

    no

    媒体

    visual

    计算值

    as specified

    动画类型

    discrete

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    值

    auto默认情况下，大多数浏览器使用自动表格布局算法。表格及其单元格的宽度将根据内容进行调整。

    fixed表格和列的宽度由单元格的宽度

    table和col元素来设置宽度或第一行单元格的宽度。

    后续行中的单元格不会影响列宽度。在“固定”布局方法下，一旦第一个表格行被下载和分析，就可以呈现整个表格。这可以加快渲染时间，而不是“自动”布局方法，但后续单元格内容可能不符合提供的列宽。单元格使用该overflow属性来确定是否剪辑任何溢出的内容，但仅当表格具有已知宽度时; 否则，他们不会溢出细胞。

    形式语法

    auto | fixed

    例

    HTML

    <table>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>Albert</td><td>Schweitzer</td></tr>
  <tr><td>Jane</td><td>Fonda</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

    CSS

    table {
  table-layout: fixed;
  width: 100px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

    结果

    规范

    Specification

    Status

    Comment

    CSS Level 2 (Revision 1)The definition of ‘table-layout‘ in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    ? – 14.0 +

    (Yes)

    1.0 (1.7 or earlier)

    5.0

    7.0

    1.0

    Feature

    Android

    Chrome for Android

    Edge

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    ? 1.5

    ?

    (Yes)

    ?

    ?

    ? 9.8.0

    ? 3.0

    		 
  • ??CSS 中文开发手册

  • ??本文标题：
    表格布局 | table-layout (Miscellaneous Level 2) – CSS 中文开发手册 – Break易站 转载请保留页面地址：https://www.breakyizhan.com/css/32269.html