div内的表格 - td的内容会导致水平溢出。我怎样才能限制宽度？

http://jsfiddle.net/HeMKY/8/div内的表格 - td的内容会导致水平溢出。我怎样才能限制宽度？

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

我想

overflow is clipped

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

我希望的width:100%或max-width:100%;一些组合上table或tr会做的伎俩，但我不能得到它的工作。

来源

2011-08-22 kenwarner

也许这将有助于没有400px的图像在表中，你想要300px？ –

尝试告诉我的用户 – kenwarner

基于下面的回复我认为这将有助于如果你告诉我们你需要支持哪些浏览器和版本。 – mrtsherman

您可以将word-break:break-all;添加到您的td。但是，您的图片仍然存在问题。你期望在图像上发生什么？您无法将图片进行包装，因此无论是需要隐藏还是较小。我认为没有解决方法。

在得知这不被FF支持后，我想我在背后知道了我做了一些更多的研究。从我发现你不能这样做。有两种黑客可以使用。

第一种是使用标记，如quirksmode所述。缺点是它并不是无处不在。

另一种是插入空格字符extremely narrow。这给表格单元格打开了一些东西。希望其他人能够提出更好的，符合标准的答案，但我找不到。

来源

2011-08-22 03:58:58 mrtsherman

在firefox中无法正常工作:( – kenwarner

经过一番调查后更新了我的答案）upvoted your question so我希望能有更好的答案 – mrtsherman

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

This page显示它能做什么，而这一切都是通过导入其grid.css文件HTML文档中，添加一些div与特定的类名来实现的。

您可以下载Blueprint here，然后阅读h3。在TUTORIAL.textile下载中创建网格段落。

来源

2011-08-22 14:25:38 Andrea

我已经考虑过使用css框架，但不幸的是它不符合我的需要，主要是我需要'.left'来扩展它的内容，无论它是15px还是150px。据我所知，这是不可能没有表（至少，不支持在旧浏览器） – kenwarner

我建议你尝试table-layout: fixedas shown here（作品在IE6 +，火狐，&铬）

与定义width: 40px（或其他）为您的左侧栏和右侧立柱设置overflow-x: hidden相结合，你应该实现期望的影响。

来源

2011-08-22 16:57:09 canon

我也试过，但'table-layout：fixed'没有完全支持在我需要的浏览器支持 – kenwarner

已更新。该提琴在ie6 +，firefox和chrome中工作。 – canon

感谢您再次查看。我在另一条评论中提到我需要'.left'来扩展以适应其内容，无论是是15px或150px。我不想在该列上设置固定宽度。据我所知，没有表格，这是不可能的 – kenwarner

div内的表格 - td的内容会导致水平溢出。我怎样才能限制宽度？

回答

相关问题