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

tianshan277_table 一想到内容超出范围打点点,我们一下子就想到以下代码: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是当我们给td设置了宽度之后,发现看度并不起作用。于是我开始设置table的宽度,发现任然不起作用。
后来从网上发现table原来是这么设置的:
  • 给table 加table-layout:fixed。
  • 给table加宽度 只有给table加了宽度 ! td th的宽度才能起作用。
  • 一定要给第一行的 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的内容超出宽度打点点
    点赞

    发表评论

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