表超过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

我认为在这种情况下，它要么是无包装要么......或者你只是处理超出屏幕数据范围的内容。无包裹正在做它的工作，你的宽度也是如此：100％