CSS table-layout 属性

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>

猜你喜欢

转载自blog.csdn.net/m0_37158404/article/details/81735337
今日推荐