1. 程式人生 > >CSS table-layout 屬性

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>