table td 的溢出隐藏

Posted RoadAspen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了table td 的溢出隐藏相关的知识,希望对你有一定的参考价值。

今天碰到一个问题,就是在一个双列的表格布局中,我想让 左边一列宽度为 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 的溢出隐藏的主要内容,如果未能解决你的问题,请参考以下文章

控制表格内的文本溢出时隐藏

table中td超出内容隐藏,鼠标悬停全部显示(完整版,含js代码)

table布局, td内部元素溢出边界问题。 (已解决)

用css解决table文字溢出控制td显示字数

table表格如何隐藏溢出的内容

表格中td限宽溢出以省略号代替