css设置td th的内容超出宽度打点点

tianshan277_table

一想到内容超出范围打点点,我们一下子就想到以下代码:

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

但是当我们给td设置了宽度之后,发现看度并不起作用。于是我开始设置table的宽度,发现任然不起作用。


后来从网上发现table原来是这么设置的:

  1. 给table 加table-layout:fixed。
  2. 给table加宽度 只有给table加了宽度 ! td th的宽度才能起作用。
  3. 一定要给第一行的 td或者th进行宽度设置 。

注意:如果不给td th 加宽度,则td th以等宽的距离显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Szy1000</title>
    <style>
        body{
            background-color: #ccc;
        }
        td{
            padding: 0 10px;
            width: 40px;
            height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<table style="border-collapse:collapse;table-layout:fixed;"  width="100%" border="1">
    <tbody>
    <tr>
        <th width="80px">编号</th>
        <th>内容</th>
    </tr>
    <tr>
        <td width="80px">12123121231</td>
        <td>12456</td>
    </tr>
    </tbody>
</table>
</body>
</html>

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » css设置td th的内容超出宽度打点点

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注