css - 表超过 div 的大小，因为空白

Question

我这里有个小问题。好吧，我需要防止表格中的元素换行，所以我使用 white-space: nowrap;。这就是问题所在。该表位于一个 div 中:

<div class='content'>
    <table>
    <!--Table elements goes here-->
    </table>
</div>

在 CSS 中，我有:

div.content
{
    background-color: #E6EBF2;
    padding: 20px;
}
table
{
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    border-spacing:0;
    background-color: white;
    white-space: nowrap;
}
th, td 
{
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #D6CECE;
    overflow: hidden;
}

问题是如果屏幕的分辨率小于表格，div content 的宽度不会根据表格大小扩展，从而破坏布局。
我的结果是像这样的东西:

但它需要是这样的:

使用 display: inline-block 可以，但我无法将 div 居中对齐。感谢您的帮助，谢谢!

Answer 1

我认为在这种情况下，要么不换行......要么你只处理超出屏幕资源范围的内容。 No-wrap 正在做它的工作，你的 width:100% 也是如此