Suz*_*ioc 8 html css width css-tables
我在下面编码样式:
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
我可以添加不可见的单词分隔符,如果空间不足会导致单词断开和连字符,如果有足够的空间则会连续单词？
Juk*_*ela 19
宽度设置不会被忽略; 它只是被细胞内容的最低要求所覆盖.在每列中,最长的单词确定最小可能的宽度.这符合CSS规范:对于表,该width属性默认只是建议的最小宽度.
尽管如此,"尽可能小"是相对的.您可以通过不同方式启用分词.但是要了解这会带给您什么,您可以通过更改<html>标记<html lang=ru>并将规则添加* { -moz-hyphens: auto }到CSS并在Firefox上测试页面来进行测试.您将看到格式化的表格,以便单词被连字符,宽度尽可能接近声明的宽度.它看起来很糟糕.声明的宽度对于内容来说太小了.
或者,尝试table { table-layout: fixed }在CSS中设置.无论如何,这将强制宽度.这将使细胞内容溢出细胞.我不认为你会喜欢这个.
因此,我建议您不要尝试强制执行如此窄的宽度,而是完全删除宽度设置并启用连字符.结果看起来相对不错.对于断字,我会建议使用Hyphenator.js,一个基于JavaScript的做法,跨浏览器的工作原理; 基于CSS的方法仍然具有相当有限的浏览器支持.
您的问题是由于表中每个单元格中的单个单词太长而且您没有指定应该如何处理这一问题.
尝试添加:
word-break: break-all;
为了你的table.gridtable td规则.