0

我的页面有一个以页面为中心的主 div。我通过使用 margin: auto; 来做到这一点。

页面本身运行良好 - 但是一旦我包含一个从数据库动态加载数据的表，页面就无法正确对齐初始中心。

请看下面的例子：

<!DOCTYPE html>
<html>
<head>
<title>Invoice Control</title>
</head>

<body class="single">

<div id="wrapper" style="width:1100px;margin:auto;padding:10px; border: 1px solid gray">

    <div id="content" style="border: 1px solid red">

        here comes the table, which makes the site not center nicely

        <table>
            <tr>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
            </tr>
        </table>

    </div>
</div>

</body>
</html>

知道我必须做什么，以确保居中的 div 再次正确居中吗？

4

2 回答 2

0

问题与您的 div 溢出有关。正如您的演示所示，您有一个大小为 1100 像素的框正确居中，但您的桌子正在从中出来。原因是由于无法拆分的单词强制列的最小宽度以及整个表格的最小宽度，因此无法使表格变得更小。

有几个选项可以解决这个问题，具体取决于您想要做什么。在我看来，最好的办法是width: 1100px;将min-width:1100px. 如果它的内容想要大于 1100px，这将允许 div 扩展，就像在这种情况下一样。

或者，您可以使用 div 上的溢出样式来创建滚动条或隐藏溢出。

于 2013-05-30T15:13:29.107 回答
0

谢谢你的回复。

他们为我指明了正确的方向，尽管我已经决定采用另一种解决方案。

我不喜欢“最小宽度”的一点是表格总是缩放到 100%。在我的示例中，文本“这是填充表格并超过 1100PX 的虚拟文本”不是最大程度地压缩在一起，而是占用了站点上的所有可用空间。这听起来不错，但实际上并不适合我的页面的其余部分（例如背景图像）。在我的上下文中，“超宽”表是一个例外，我想确保该表被最大程度地挤压在一起，并且网站“增长”尽可能少。

因此，我使用了一些 java 脚本来帮助我。我找出桌子的宽度

if ($(".myTable").width() > 1100px) {
      $(".myTable").width($(".myTable").width() + 5);
}

知道这可能不是满足目的的最漂亮的解决方案。或者你有什么想法我可以将哪些 CSS 样式应用于表格以确保它在超过“居中 div”的 1100px 时始终缩放到最小值？

于 2013-05-31T17:14:37.447 回答