内容简介：宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合CSS规范：对于表,width属性默认只是建议的最小宽度.不过,“尽可能小”是相对的.您可以通过不同方式启用分词.但要了解这会带给您什么,您可以通过更改<html>进行测试.标记为<html lang = ru>并将规则* {-moz-hyphens：auto}添加到CSS并在Firefox上测试页面.您将看到格式化的表格,以便单词被连字符,宽度尽可能接近声明的宽度.它看起来很糟糕.声明的宽度对于内容来说太小
我在下面编码样式：
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:14px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 400px;
}
我在Firebug中看不到任何重叠.然而,表宽度计算为812 px;
为什么？
实际页面在这里(俄语)： http://garmonia-znakomstva.ru/service.html
UPDATE
我可以添加不可见的单词中断,如果空间不足会导致单词断开和连字符,如果有足够的空间则会连续单词？
宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合CSS规范：对于表,width属性默认只是建议的最小宽度.
不过,“尽可能小”是相对的.您可以通过不同方式启用分词.但要了解这会带给您什么,您可以通过更改<html>进行测试.标记为<html lang = ru>并将规则* {-moz-hyphens：auto}添加到CSS并在Firefox上测试页面.您将看到格式化的表格,以便单词被连字符,宽度尽可能接近声明的宽度.它看起来很糟糕.声明的宽度对于内容来说太小了.
或者,尝试在CSS中设置表{table-layout：fixed}.无论如何,这将强制宽度.这将使细胞内容溢出细胞.我不认为你会喜欢这个.
因此,我建议您不要尝试强制执行如此窄的宽度,而是完全删除宽度设置并启用连字符.结果看起来相对不错.对于连字符,我建议使用 Hyphenator.js ,这是一种适用于浏览器的基于JavaScript的方法;基于CSS的方法仍然具有相当有限的浏览器支持.
翻译自：https://stackoverflow.com/questions/13850614/why-table-width-is-ignored
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 测试图片宽度
- <input> 宽度自适应变化
- 零宽度字符：和谐？屏蔽？不存在的
- Android 自定义DialogFragment宽度控制
- 超过制定宽度(或行数)显示...(或省略)
- 微信小程序 - 富文本图片宽度自适应
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
xHTML+CSS+Dreamweaver CS3标准网站构建实例详解
李晓斌 / 第1版 (2007年9月1日) / 2007-9 / 49.9
《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》特别适合网站美工、网站前端架构师、网页设计爱好者、Wap页面设计师作为学习Web标准网页制作的入门图书，也适合Web标准网站高手作为案头随手查询手册，也适合作为美术院校和培训学校相关专业的培训教材。一起来看看 《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》 这本书的介绍吧!
