为什么表格宽度被忽略？答案

【问题标题】：Why table width is ignored?为什么表格宽度被忽略？
【发布时间】：2012-11-30 19:08:59
【问题描述】：

我的编码风格如下：

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 像素；

为什么？

实际页面在这里（俄语）：http://garmonia-znakomstva.ru/service.html

更新

是否可以添加不可见的分词，如果空间不足会导致分词和连字符，如果空间足够则导致连续单词？

【问题讨论】：

有趣的是 CSS width 规则不存在于 URL 链接到的文档的样式中......
是的：style.css:332.

标签： html css width css-tables

【解决方案1】：

宽度设置不会被忽略；它只是被单元格内容的最低要求覆盖。在每一列中，最长的单词决定了可能的最小宽度。这符合 CSS 规范：对于表格，width 属性默认只是建议的最小宽度。

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

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

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

【讨论】：

链接错误。这是正确的：mnater.github.io/Hyphenator（即使我可以找到一个“演示”但只有一个长文本要阅读......）
我更新了 Hyphenator 的链接并删除了演示的链接。

【解决方案2】：

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

尝试添加：

word-break: break-all;

到您的table.gridtable td 规则。

【讨论】：

使用word-break: break-all 对俄语来说是错误的，对于大多数语言来说也是如此。这意味着在不指明中断的情况下任意中断单词。
我相信这个答案是正确的，关于break-all 的值，好吧，如果你知道css，你知道还有break-word 选项，如果你的表包含需要被打破的有意义的词在实际的单词边界上。

【解决方案3】：

因为表格中有单词，默认是不能换行的，所以表格不能收缩。效果会发生：

| verylongwordandsoon | anotherlongwordinrussian | justanotherword

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

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

word-break: break-all;

【讨论】：

这不是真的。使用 CSS3 等，单词可以被包装（见我的回答）。
@BenM：是的。通常它不能，但确实在 CSS3 中是可以定义的。（我只是还在写我的答案。）

【解决方案4】：

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

td { white-space:normal}

【讨论】：

所有其他建议在某种程度上都有效，但不是在复杂的上下文中（div 中的 div 中的表等），或者确实是任意破坏单词。在样式表中添加 * {white-space: normal} 被证明是最全面、最简单的解决方案。

【解决方案5】：

您不能将表格制作得太小而无法容纳其内容。您可以尝试减小字体大小或尝试不同的布局（例如使用更少的列）。

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

【讨论】：

【解决方案6】：

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

【讨论】：