Question

我在下面编码了样式：

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

更新

我可以添加不可见的单词分隔符，如果空间不足会导致单词断开和连字符，如果有足够的空格则会连续单词？

Answer 1

不忽略宽度设置;它只是被细胞内容的最低要求所覆盖。在每列中，最长的单词确定最小可能的宽度。这与CSS规范一致：对于表，width属性默认只是建议的最小宽度。

但是，“尽可能小”是相对的。您可以通过不同方式启用分词。但是要了解这会带给您什么，您可以通过将<html>标记更改为<html lang=ru>并将规则* { -moz-hyphens: auto }添加到CSS并在Firefox上测试页面来进行测试。您将看到格式化的表格，以便单词被连字符，宽度尽可能接近声明的宽度。它看起来很糟糕。声明的宽度对于内容来说太小了。

或者，尝试在CSS中设置table { table-layout: fixed }。无论如何，这将强制宽度。这将使细胞内容溢出细胞。我不认为你会喜欢这个。

因此我建议您不要尝试强制执行如此窄的宽度，而是完全删除宽度设置并启用连字符。结果看起来相对不错。对于连字符，我建议使用Hyphenator.js，这是一种适用于浏览器的基于JavaScript的方法;基于CSS的方法仍然具有相当有限的浏览器支持。

Answer 2

您的问题是由于表中每个单元格中的单个单词太长而且您没有指定应该如何处理这一问题。

尝试添加：

word-break: break-all;

到table.gridtable td规则。

Answer 3

这是因为表中有单词，默认情况下无法包装，因此表不能缩小。效果会发生：

| verylongwordandsoon | anotherlongwordinrussian | justanotherword

如果您尝试将font-size设置为1px，您会看到宽度正好是400像素。

但是，在CSS3中，CSS属性word-break可以处理它。

word-break: break-all;

Answer 4

您不能使表格的内容太小。您可以尝试减小字体大小或尝试不同的布局（例如使用较少的列）。

关于你更新的问题：是的，你可以添加不可见的单词分隔符（这里是一个例子：How to Wrap unspaces word for Opera Browser）但这实际上是最后的手段。

Answer 5

您的css文件可能已经定义white-space: nowrap;，这会阻止自动换行。

Answer 6

明确地应用这个给了我正确的结果，宽度被尊重，使用新线的长文本和相应地扩展的高度（而不是宽度）。

td { white-space:normal}

为什么忽略表格宽度？

6 个答案: