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;
}