CSS table-layout 属性

最新推荐文章于 2022-08-31 16:12:39 发布

m0_37158404

最新推荐文章于 2022-08-31 16:12:39 发布

阅读量149

点赞数

分类专栏： CSS CSS知识 CSS应用

本文链接：https://blog.csdn.net/m0_37158404/article/details/81735337

版权

CSS 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

CSS应用

9 篇文章 0 订阅

订阅专栏

CSS知识

6 篇文章 0 订阅

订阅专栏

http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

应用：（1）单元格内容过长隐藏用省略号代替

<html>
<head>
    <title></title>
    <style type="text/css">
        #myTable {
            width: 400px;
            table-layout: fixed; /* 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关 */
        }
 
            #myTable td {
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis;
            }
    </style>
</head>
<body>
    <table id="myTable">
        <tr>
            <td>你是天底下最不聪明的人</td>
            <td>这是一个很宽的表格，我不喜欢让它全部显示哦，你懂不懂呀</td>
        </tr>
    </table>
</body>
</html>

应用：（2）单元格内容过长，自动换行

<html>
<head>
    <title></title>
    <style type="text/css">
        #myTable {
            width: 400px;
            table-layout: fixed; /* 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关 */
        }
 
            #myTable td {
                word-wrap:break_word
            }
    </style>
</head>
<body>
    <table id="myTable">
        <tr><th>项目</th><th>内容</th></tr>
        <tr>
            <td>你是天底下最不聪明的人</td>
            <td>这是一个很宽的表格，我不喜欢让它全部显示哦，你懂不懂呀</td>
        </tr>
    </table>
</body>
</html>

m0_37158404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS table-layout 属性

http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 应用：（1）单元格内容过长隐藏用省略号代替&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #myTable { ...
复制链接

扫一扫

专栏目录