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

宽大的桌子留下围绕div

1 个答案: