html - 为什么这个 HTML 表格会延伸到 div 之外？

Question

我将尝试使我的问题尽可能清楚，我将感谢任何帮助，因为我没有地方寻找答案。

我在这个网站上有 3 张桌子：http: //3577wf14.clindgrencv.com。我已经梳理了所有三个表格的格式（HTML/CSS、ids、类、开放元素等），它们是相同的。（显然，不是内容，而是代码。）然而，第一个表不像后面的2个那样符合section > div > table的关系。换句话说，随着窗口宽度的减小，第 2 和第 3 表符合 div，但第 1 表不符合。

这是问题的一些屏幕截图。注意计算的宽度值：

问题表#1

工作台

非常感谢任何对答案的提示。同样，我已经尽力将它与其他 2 个工作正常的表进行交叉比较。

真挚地，

卡住

Answer 1

问题似乎是由于此链接：

http://www.ted.com/talks/kevin_slavin_how_algorithms_shape_our_world?language=en

由于 URL 在表格中，因此它会推动表格的边界并扩展宽度（取决于您的显示器分辨率和浏览器窗口大小）。这是完整显示 URL 的问题之一（尽管老实说，我希望它会在斜线处中断）。

使用以下样式的 URL 过长可以避免此类问题：a { word-break: break-all; }. 根据 Mozilla 文档word-break，作为 CSS3 的一部分，它得到了很好的支持。