溢出：使用表格时隐藏不起作用答案

【问题标题】：overflow:hidden not working when using tables溢出：使用表格时隐藏不起作用
【发布时间】：2016-05-17 17:10:26
【问题描述】：

我的表格中出现长长的文本字符串问题，overflow:hidden 似乎没有按照我的预期进行。这是我用来测试这种效果的示例代码：

<html>
    <head>
        <style type="text/css">
            td.scroll
            {
                background-color:#00FFFF;
                width:100px;
                height:100px;
                overflow:scroll;
            }
            td.hidden 
            {
                background-color:#00FF00;
                width:100px;
                height:100px;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <table width="100%">
            <tr>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
            <tr>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
                <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </td>
            </tr>
        </table>
    </body>
</html>

加载后，无论表格宽度如何，文本都会伸展以显示所有字符串。我所追求的是不显示超出单元格测量的字符串的任何部分。这甚至可以用表格实现吗？如果可以，我做错了什么？

【问题讨论】：

标签： html css

【解决方案1】：

溢出仅适用于块级元素。表格元素不是块元素。如果您想获得这些效果，请在表格单元格中添加 <div> 并将效果应用于 <div>。

td.scroll div {
  background-color: #00FFFF;
  width: 100px;
  height: 100px;
  overflow: scroll;
}

td.hidden div {
  background-color: #00FF00;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

与：

<table width="100%">
<tr>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>

<tr>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
  <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
</tr>
</table>

【讨论】：

做到了。非常感谢这并节省了我剩下的头发！我想我需要进一步阅读我的 CSS。
这是 CSS 的一个相当神秘的方面。只有当他们遇到这个确切的问题时，才会有人发现它。相信我，在那里做过。
CSS 2.1 说overflow 确实适用于表格单元格。然而实际上只有 WebKit 支持在单元格上滚动。 hidden 工作正常。
请不要将块级元素放入内联级元素中。您只需将 <td> 设置为 `display: inline-block' 即可实现您想要的效果。

【解决方案2】：

默认情况下，自动表格布局机制会扩展表格宽度以适应最小单元格内容宽度。告诉它不要使用 table-layout 属性：

<table width="100%" style="table-layout: fixed">

您的示例按预期工作。您可能还应该从表格单元格中删除 width: 100px，因为这与 100% 宽度的表格结合使用是没有意义的。（虽然使用固定的表格布局并不重要，因为只有第一行单元格或<col>s 对列宽有任何影响。）

注意overflow: scroll 或auto 不适用于大多数浏览器中的表格单元格。（在 WebKit 中也是如此。）

【讨论】：

“表格布局：固定”并没有改变任何事情。高度还在扩大。在 webkit 的 chrome 上测试

【解决方案3】：

<html>
<head>
<style>
td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }
</style>

</head>

<body>

<table border="1" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>

</body>

</html>

【讨论】：

【解决方案4】：

不确定它是否不应该适用于表格单元格，但理想情况下您并不真的想隐藏它们。我建议你把长词连起来，你可以用下面的lib轻松地做到这一点（只需几行js即可实现）：

http://code.google.com/p/hyphenator/

例子：

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

【讨论】：

正在考虑类似的事情，但不幸的是，这个设计决定不取决于我。