固定 table宽度 table-layout: fixed
发布时间：2014-05-15 10:13:56 作者：佚名 
我要评论
我要评论 如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，不过可以通过禁用文本换行来解决这个问题
为了让表格能够填充屏幕(剩余空白区域)，常将其宽度属性定义为：100%，单元格也是用百分数来定义。
但这样就会出现问题： 如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，很难看。
很容易想到的解决方法是，禁用文本换行： white-space:nowrap; overflow:hidden;
So easy! 但效果仍然出乎意料：文本全部在一行显示，宽度自动加宽，甚至还超出了父容器，overflow完全没有起作用！
怎么回事？ 百分比的原因么？ 但是如果使用静态的固定宽度，就失去了表格的灵活性。
于是乎，不费吹飞之力地找到了终极解决方案： 固定表格宽度： table-layout: fixed;
顺便做了个简易的效果图，参考下：
但这样就会出现问题： 如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，很难看。
很容易想到的解决方法是，禁用文本换行： white-space:nowrap; overflow:hidden;
So easy! 但效果仍然出乎意料：文本全部在一行显示，宽度自动加宽，甚至还超出了父容器，overflow完全没有起作用！
怎么回事？ 百分比的原因么？ 但是如果使用静态的固定宽度，就失去了表格的灵活性。
于是乎，不费吹飞之力地找到了终极解决方案： 固定表格宽度： table-layout: fixed;
顺便做了个简易的效果图，参考下：
相关文章
- 这篇文章主要介绍了html解决table设置宽度无效的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-07-30
- 这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-06-16
表格设置table-layout:fixed后对单元格宽度设置无效
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习2014-04-14- 最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下2014-04-11
- 页面中table宽度设置width之后，宽度仍然不是固定的，文字太长后不换行，下面有个不错的方法可以有效解决这个问题2014-02-17
td 内容自动换行 table表格td设置宽度后文字太多自动换行
table表格td设置宽度后文字太多导致自动换行，这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的，可以参考下本文，可能会有意外的收获2022-12-16
html table呈现个人简历以及单元格宽度失效的问题解决
这篇文章主要介绍了html table呈现个人简历以及单元格宽度失效的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下2021-01-22
最新评论