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 设定的宽度可以一直生效，且 设置的溢出隐藏效果也可以生效。