• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • table-layout

    table-layout CSS属性定义了用于布局表格单元格,行和列的算法。

    示例

    /* keyword values */
    table-layout: auto;
    table-layout: fixed;
    
    /* global values */
    table-layout: inherit;
    table-layout: initial;
    table-layout: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持table-layout

    语法:

    table-layout:auto| fixed

    取值:

    • auto:默认的自动算法。大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。布局将基于各单元格的内容,换言之,可能你给某个单元格定义宽度为100px,但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来,速度很慢
    • fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切。表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。使用fixed布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于auto自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用overflow属性控制是否允许内容溢出。

    说明:

    设置或检索表格的布局算法。

    • 通常fixed算法会比auto算法高效,尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。
    • 对应的脚本特性为tableLayout
    默认值auto
    适用于tableandinline-table元素
    继承性
    动画性
    计算值指定值

    例子

    本示例使用了fixed的表格布局,结合width属性来限制表格的宽。text-overflow属性用于文字过长时显示省略号。

    如果表格的布局是auto,即使指定了表格的width,表格仍然会自适应内容自动撑开。

    //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: 120px;
     border: 1px solid red; 
    }
     
    td {
     border: 1px solid blue;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis; 
    }
    
    edwood
    albertschweitzer
    janefonda
    williamshakespeare

    下篇:empty-cells