表与巨大的宽度叶子周围div

Question

我有一个问题与以下代码:

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

问题是:由于大量的td's超过了浏览器宽度的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;
}