首页 > 其他 > 详细

table td 的溢出隐藏

时间:2018-01-07 15:11:06      阅读:285      评论:0      收藏:0      [点我收藏+]

今天碰到一个问题,就是在一个双列的表格布局中,我想让 左边一列宽度为 40%,右边一列宽度为60%;

然后依次设置左边td宽度40%和右边td宽度60%,状态显示正常,宽度也正常。但是当 右边的td内部的内容宽度大于60% 的时候,并没有换行,而是让右边的td宽度超过了60%,而左边的td表格小于40%;致使表格结构直接崩溃。

而 给右边td  设置 overfolow:hidden;white-space:nowrap;text-overflow:ellipsis;  却不能生效。

原因是 table 的宽度流,会根据内容大小更改td的宽度。而设置宽度只能是初始宽度,有个默认的效果,一旦内容超出,宽度设置就会失效。

 

解决方法; 给table  设置 table-layout:fixed;  该属性可以将 table的流式布局更改为 固定布局,这时 给td 设定的宽度可以一直生效,且 设置的溢出隐藏效果也可以生效。

table td 的溢出隐藏

原文:https://www.cnblogs.com/RoadAspenBK/p/8227798.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!