CSS table-layout 属性

CSS table-layout 语法

在 CSS 中，table-layout 属性用于定义表格中行、列、单元格的布局方式。

语法：

table-layout: 关键字;

说明：

table-layout 的取值有 2 种，如下表所示。

table-layout 属性取值
取值	说明
auto（默认值）	采用自动布局方式，列宽由单元格中的内容决定
fixed	采用固定布局方式，列宽由第一行单元格的宽度决定。如果第一行没有宽度，则不管单元格的内容多少，列宽都会在整个表中等分。

在自动布局（auto）中，某一列的宽度是由该列所有单元格中最宽的内容决定，该算法渲染速度有时会比较慢，这是因为它需要先访问表格中所有内容，然后再决定列宽。

在固定布局（fixed）中，水平方向的布局与单元格的内容无关，而是与表格宽度、列宽度、边框宽度等有关。相比于自动布局，固定布局的渲染速度更快。

注意:

table-layout 属性是用于 table 元素的。
当使用 table-layout: fixed; 布局时，列宽主要由表格或第一行单元格的宽度确定。后续行的单元格宽度会被忽略（除非是第一行的单元格）。
table-layout: fixed; 主要用于提高表格的渲染速度，因为它不需要读取所有单元格的内容来计算布局。

CSS table-layout 摘要

属于	CSS 表格
使用频率	中
是否继承	否
默认值	auto
兼容性	查看
官方文档	查看
MDN	查看

CSS table-layout 示例

接下来，我们通过一个简单的例子来讲解一下 CSS table-layout 属性是如何使用的。

示例 1：table-layout 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, th, td { border:1px solid red; }
        table { 
            width: 200px;
            table-layout: fixed; 
        }
    </style>
</head>
<body>
    <table>
        <caption>主流编程语言的用途</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>语言</th>
                <th>用途</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>Python</td>
                <td>人工智能、Web开发、办公自动化、网络爬虫等</td>
            </tr>
            <tr>
                <td>C</td>
                <td>嵌入式开发、系统服务、单片机、游戏开发等</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>Java</td>
                <td>Web开发、安卓开发、大数据等</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

table-layout 示例

分析：

上面例子使用了 table-layout: fixed;。由于我们给 table 设置了宽度，而没有给单元格设置宽度，此时在水平方向上所有列都是等宽的（非常重要的特点）。如果把 table-layout: fixed; 删除，此时页面效果如下图所示。

删除 table-layout: fixed; 的效果

在实际开发中，table-layout: fixed; 非常适用于渲染数据多的大型表。

示例 2：单行文字溢出显示省略号

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            width: 300px;          /* 必须给表格设定宽度 */
            table-layout: fixed;   /* 必须开启固定布局 */
            border-collapse: collapse;
        }
        td {
            border: 1px solid gray;
            padding: 5px;
            
            /* 文字溢出三件套 */
            white-space: nowrap;      /* 强制不换行 */
            overflow: hidden;         /* 超出部分隐藏 */
            text-overflow: ellipsis;  /* 超出部分显示省略号 */
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>01</td>
                <td>绿叶网</td>
            </tr>
            <tr>
                <td>02</td>
                <td>HTML，全称 “Hyper Text Markup Language（超文本标记语言）” ，它是创建网页最基本的语言。</td>
            </tr>
            <tr>
                <td>03</td>
                <td>CSS，全称 “Cascading Style Sheet（层叠样式表）”，它是用来控制网页外观的一门技术。</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

页面效果如下图所示。

在开发后台管理系统时，我们经常会遇到某个单元格内容过长（如 URL 或长标题）导致表格被撑宽或布局错乱的问题。如果想要实现 “超出显示省略号 (...)” 的效果，必须同时满足以下 4 个条件，缺一不可：

table 元素必须设置 width（具体数值或 100%）。
table 元素必须设置 table-layout: fixed;（这是前提，否则单元格会被内容撑开）。
td 元素必须设置 white-space: nowrap;（禁止文字自动换行）。
td 元素必须设置 overflow: hidden; 和 text-overflow: ellipsis;。