table td 的溢出隐藏

你离开我真会死。 提交于 2020-01-29 05:27:05

今天碰到一个问题,就是在一个双列的表格布局中,我想让 左边一列宽度为 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 设定的宽度可以一直生效,且 设置的溢出隐藏效果也可以生效。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!