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:hidden ，否则自然适合的内容也会被隐藏。我还需要启用 .left 来拉伸以适合其内容，即其中的内容宽度范围可以为 10-150px，并且我希望该列不比其最宽的内容宽。据我所知，如果没有表格，这是不可能的，所以这就是为什么我使用表格而不是 table-layout:fixed 或 CSS 网格框架。
我希望在 table 或 tr 上使用 width:100% 或 max-width:100%; 的组合> 可以解决问题，但我无法让它发挥作用。
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;
}
RESULT
WHAT I WANT
Note how both images and text could cause overflows. Also, some content that naturally fits is right-floated, so I can't just do overflow:hidden or else that naturally-fitting content gets hidden as well. I also need to enable .left to stretch to fit its contents, i.e. the content there could range in width from 10-150px and I want that column to be no wider than its widest content. As far as I know, this isn't possible without tables so that's why I'm using a table instead of table-layout:fixed or a CSS grid framework.
I was hoping some combination of width:100% or max-width:100%; on the table or tr would do the trick, but I can't get it to work.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以将
word-break:break-all;添加到您的 td。但是，您的形象仍然存在问题。您预计该图像会发生什么？您无法包装图像，因此需要将其隐藏或缩小。我认为没有解决方法。在得知 FF 不支持这一点后（我想我心里也知道这一点），我做了一些更多的研究。据我所知，你做不到。您可以使用两种技巧。
第一种是使用 quirksmode。缺点是并非所有地方都支持它。
另一种是插入一个极窄的空格字符。这给了表格单元格一些可以打破的东西。希望其他人能够提出一个更好的、符合标准的答案，但我找不到。
You can add
word-break:break-all;to your td. However, you will still have a problem with your image. What do you expect to happen with the image? You can't wrap an image so it either needs to be hidden or smaller. I don't think there is a workaround for that.After learning that this isn't supported by FF, which I guess I kind of knew in the back of my mind I did some more research. From what I found you can't do it. There are two hacks you can work in.
First one is to use the tag as discussed by quirksmode. Downside being that it isn't supported everywhere.
The other is to insert a space character that is extremely narrow. This gives the table cell something to break on. Hopefully somebody else can come up with a better, standards compliant answer, but I can't find one.
我建议您尝试
table-layout:fixed如此处所示 (适用于 ie6+、firefox 和 chrome）结合为左列定义
width: 40px（或其他）并在右列设置overflow-x: hide，你应该实现想要的效果。I'd suggest you try
table-layout: fixedas shown here (works in ie6+, firefox, & chrome)Combined with defining
width: 40px(or whatever) for your left column and settingoverflow-x: hiddenon the right column, you should achieve the desired affect.看看您想要做什么，不要使用
表格，而是考虑使用蓝图的网格。此页面展示了它的功能，而这一切都是通过简单地导入它们来实现的html 文档中的
grid.css文件并添加一些具有特定类名的 div。您可以在此处下载蓝图，然后阅读h3。在下载的 TUTORIAL.textile 中创建网格段落。
Seeing what you want to do, instead of using a
table, consider using Blueprint's grid.This page shows what it can do, and it is all achieved by simply importing their
grid.cssfile in your html document and adding some divs with specific class names.You can download Blueprint here and then read h3. Creating a Grid paragraph in the TUTORIAL.textile in the download.