div 内的表 - td 的内容导致水平溢出。如何限制宽度？

Question

http://jsfiddle.net/HeMKY/8/

HTML

<div id="wrapper">
    <table>
        <tr>
            <td class="left">left</td>
            <td class="right"><span>this text is right-floated</span></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right"><img src="foo.gif" height="100" width="400" /></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right">THISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONG</td>
        </tr>
    </table>
</div>

CSS

#wrapper
{
    max-width:300px;
    height:300px;
    background-color:gray;
    padding:5px;
}
td
{
    padding:5px;
}
td.left
{
    background-color:yellow;
}
td.right
{
    background-color:green;
}
td.right span
{
    float:right;
}

结果

我想要什么

请注意图像和文本如何导致溢出。此外，一些自然适合的内容是右浮动的，所以我不能只做overflow:hidden，否则自然适合的内容也会被隐藏。我还需要启用.left 来拉伸以适应其内容，即那里的内容的宽度范围可以为 10-150 像素，我希望该列不超过其最宽的内容。据我所知，没有表格这是不可能的，所以我使用表格而不是 table-layout:fixed 或 CSS 网格框架。

我希望 table 或 tr 上的 width:100% 或 max-width:100%; 组合可以解决问题，但我无法让它发挥作用。

Answer 1

您可以将word-break:break-all; 添加到您的td。但是，您的图像仍然存在问题。您希望图像会发生什么？您不能包装图像，因此它需要被隐藏或更小。我认为没有解决方法。

在得知 FF 不支持此功能后，我想我在心里知道我做了一些更多的研究。从我发现你做不到。您可以使用两种技巧。

第一个是使用quirksmode 讨论的标签。缺点是它并非在所有地方都受支持。

另一种是插入一个空格字符，即extremely narrow。这为表格单元格提供了一些可以打破的东西。希望其他人能想出一个更好的、符合标准的答案，但我找不到。

Answer 2

我建议你试试 table-layout: fixed as shown here（适用于 ie6+、firefox 和 chrome）

结合为左列定义width: 40px（或其他）并在右列设置overflow-x: hidden，您应该可以达到预期的效果。

Answer 3

看看你想做什么，而不是使用table，考虑使用蓝图的网格。

This page 展示了它可以做什么，这一切都通过简单地在您的 html 文档中导入他们的grid.css 文件并添加一些具有特定类名的 div 来实现。

你可以下载蓝图here然后阅读h3。在下载的TUTORIAL.textile中创建一个网格段落。