css - 具有巨大宽度的表格在 div 周围留下

Question

我对以下代码有疑问：

<div style="background: #CCCCCC;">
    <table>
        <tr>
            <!-- many td's with a width of, say 40px -->
        </tr>
    </table>
</div>

问题是：由于大量的 td 超过了浏览器宽度的 100%，所以周围的 div 应该增长到 100% 以上，但事实并非如此。事实上，灰色背景在 100% 处停止，看起来好像桌子离开了周围的 div。我尝试为表格使用所有可能的“显示”变体，但没有任何帮助。

谢谢

Answer 1

你可以做的是使用table-layout: fixed;应该关联的，word-wrap: break-word;这样你的表就不会因为长而完整的td字符串而变得奇怪，或者overflow: auto;用于容器div

table {
   table-layout: fixed;
   width: /* Whatever you want */;
}

table td {
   width: /* Whatever you want */;
   word-wrap: break-word;
}

或使用

div {
   width: /* Some fixed width here */;
   overflow: auto;
}