12

我在以下编码样式：

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

更新

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

4

6 回答 6

22

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

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

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

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

于 2012-12-13T03:55:00.160 回答
9

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

尝试添加：

word-break: break-all;

遵从你的table.gridtable td规则。

于 2012-12-12T23:54:37.387 回答
4

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

| verylongwordandsoon | anotherlongwordinrussian | justanotherword

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

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

word-break: break-all;
于 2012-12-12T23:55:15.890 回答
2

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

td { white-space:normal}
于 2017-09-08T09:28:12.413 回答
1

你不能让一张桌子太小而不能容纳它的内容。您可以尝试减小字体大小或尝试不同的布局（例如使用更少的列）。

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

于 2012-12-12T23:57:35.017 回答
0

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

于 2015-03-24T14:02:49.830 回答