设置table中的宽度不随文字改变让其固定
发布时间：2014-02-17 16:02:28 作者：佚名 
我要评论
我要评论页面中table宽度设置width之后，宽度仍然不是固定的，文字太长后不换行，下面有个不错的方法可以有效解决这个问题
页面中table宽度设置width="600px"之后，宽度仍然不是固定的，文字太长后不换行，把table都撑变形了。
解决办法：
1.table 设置 宽度，绝对宽度和相对都可以
table-layout:fixed ;
设置了这个属性，其余所有td都是相同的宽度。
这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖
解决办法：
在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，并且用省略号代替：
在td上面加
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;（目前仅在IE8测试通过）
推荐方法（2013-11-14 by 张雷）用div控制td的内容
在TD中加
（1）超过宽度和高度文字会自动隐藏
<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
（2）设置了td的宽度超过长度自动换行
<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
解决办法：
1.table 设置 宽度，绝对宽度和相对都可以
table-layout:fixed ;
设置了这个属性，其余所有td都是相同的宽度。
这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖
解决办法：
在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，并且用省略号代替：
在td上面加
复制代码
代码如下:overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;（目前仅在IE8测试通过）
推荐方法（2013-11-14 by 张雷）用div控制td的内容
在TD中加
（1）超过宽度和高度文字会自动隐藏
复制代码
代码如下:<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
（2）设置了td的宽度超过长度自动换行
复制代码
代码如下:<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
相关文章
- 这篇文章主要介绍了html解决table设置宽度无效的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-07-30
- 这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-06-16
固定 table宽度 table-layout: fixed
如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，不过可以通过禁用文本换行来解决这个问题2014-05-15表格设置table-layout:fixed后对单元格宽度设置无效
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习2014-04-14- 最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下2014-04-11
td 内容自动换行 table表格td设置宽度后文字太多自动换行
table表格td设置宽度后文字太多导致自动换行，这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的，可以参考下本文，可能会有意外的收获2022-12-16
html table呈现个人简历以及单元格宽度失效的问题解决
这篇文章主要介绍了html table呈现个人简历以及单元格宽度失效的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下2021-01-22
最新评论