内容简介:宽度设置不会被忽略;它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Android和PHP开发最佳实践
黄隽实 / 机械工业出版社华章公司 / 2013-3-20 / 79.00元
本书是国内第一本同时讲述Android客户端开发和PHP服务端开发的经典著作。 本书以一个完整的微博应用项目实例为主线,由浅入深地讲解了Android客户端开发和PHP服务端开发的思路和技巧。从前期的产品设计、架构设计,到客户端和服务端的编码实现,再到性能测试和系统优化,以及最后的打包发布,完整地介绍了移动互联网应用开发的过程。同时,本书也介绍了Android系统中比较有特色的功能,比如Go......一起来看看 《Android和PHP开发最佳实践》 这本书的介绍吧!