文章/答案/技术大牛

发布

社区首页 >问答首页 >如果表格太宽，div不居中

问如果表格太宽，div不居中
EN

Stack Overflow用户

提问于 2013-05-30 23:05:34

回答 2查看 113关注 0票数 0

我的页面有一个主div，它将页面居中。我通过使用空白区: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再次正确地居中吗？

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-30 23:13:29

这个问题与您的div溢出有关。如您的演示所示，您有一个大小为1100像素的方框，它正确地居中，但是您的表格正从它出来。原因是表不能再小，因为不能拆分的单词强制列的最小宽度，从而也就是整个表的最小宽度。

有几个选项可以解决这个问题，这取决于您想要做什么。在我看来，最好的方法是将width: 1100px;更改为min-width:1100px。如果div的内容想要大于1100px，这将允许div扩展，如本例所示。

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

票数 0

Stack Overflow用户

发布于 2013-06-01 01:14:37

感谢您的回复。

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

我不喜欢“最小宽度”的是表总是缩放到100%的事实。在我的例子中，文本"THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED the 1100PX“没有最大限度地压缩在一起，而是占用了站点上的所有可用空间。这听起来不错，但实际上并不适合我页面的其余部分(例如背景图片)。在我的上下文中，“超宽”表是一个例外，我希望确保该表最大限度地挤在一起，并且站点“增长”得尽可能少。

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

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

知道这可能不是最好的解决方案，它就满足了这个目的。或者你知道我可以将哪些CSS样式应用于表，以确保如果它超过“居中div”中的1100px，它总是缩放到最小？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16839680

复制

相似问题

问如果表格太宽，div不居中
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果表格太宽，div不居中EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果表格太宽，div不居中
EN