html - 如何解决表格列太窄的问题？

Question

我是这个特定元素的新手，我的任务是解决 IE8 中出现的问题。

如果你勾选http://funds.ft.com/ETFHomepage.aspx ，有一个名为“新闻”的部分。在该部分中，有一列名为“最受欢迎的 ETF”。这应该与“最近查看的 ETF”列的宽度相同。

作为引用，此页面在 Firefox 中正确显示。有人可以指出我可以用 CSS 或(其他方式)* 做什么来解决这个问题吗？

*我知道解决此问题的最佳方法是废弃糟糕的设计并正确实现!! :-) -- 我们实际上正在这样做。这是一项艰巨的工作，因此需要很长时间。然而与此同时，我们必须修复出现的错误。谢谢

更新:请注意我对 Hristo 所说的话，“我认为问题在于左侧的表格(而不是嵌套表格)。中间的表格有其宽度由图像定义，右边的表格没有图像，所以它被压碎了”

Answer 1

发生这种情况的原因是因为您在“Alphaville:Overcoming the Volcker rule, with ETF”标题下的 url。由于 url 中没有空格，因此该表会尝试为其提供空间。所以有几种方法可以解决这个问题:

1. 纯文本 url 在网页上不太合适(尤其是当它们不在 anchor 标记中时，您可以点击它们。)您能否更新内容以便您没有原始 url在你的内容中？

2. 如果您必须能够处理没有空格的长文本行，那么您需要弄清楚如何更改页面布局，以强制文本换行或裁剪以适合容器。尝试将“table-layout: fixed”放在您的表格上，以强制仅根据表格的规范(而不是内容)来调整列宽的大小。 Firefox 似乎包装在 url 中的破折号和斜杠上，而 IE 只想包装在 url 中的破折号上。

我会说你的布局很好，你只需要修复内容生成，这样它就不会包含任何长的纯文本 url(上面的选项 1)

编辑:如果您决定使用上面的选项 2，请查看 css 规则“word-break: break-all”。它仅适用于 IE，它会强制文本在到达容器末尾时立即中断。不适合单词，但它适用于 url。所以你不能将它应用到整个新闻表，但你可以只应用到包含 url 的单元格。