css table-layout.html

最新推荐文章于 2024-07-26 14:13:22 发布

学无止境慢慢来

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量375

点赞数

分类专栏： CSS html 文章标签： css html 前端

CSS 同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

html

29 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table-layout</title>

    <style>
        /*参考：https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
        table-layout 属性用来显示表格单元格、行、列的算法规则。
        1.固定表格布局：
            固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
            在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
            通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
            注意：要同时指定 表格宽度和列宽度，该布局才有效果。

        2.自动表格布局(auto, 默认)：
            在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
            此算法较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
        */
        table {
            width: 50%;
            border-collapse: collapse; /*边框合并*/
        }

        table, td {
            border: 1px solid black;
        }

        table.auto {
            /*自动表格布局*/
            table-layout: auto
        }

        table.fixed {
            /*固定表格布局*/
            table-layout: fixed
        }

        table.fixed td {
            /*溢出隐藏，省略的文本显示为...。*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .width02 {
            width: 20%;
        }

        .width04 {
            width: 40%;
        }
    </style>
</head>
<body>

<table class="auto">
    <tr>
        <td class="width02">1000000000000000000000000000</td>
        <td class="width04">10000000</td>
        <td class="width04">100</td>
    </tr>
</table>
<br/>
<table class="fixed">
    <tr>
        <td class="width02">1000000000000000000000000000</td>
        <td class="width04">10000000</td>
        <td class="width04">100</td>
    </tr>
</table>

</body>
</html>

效果图：