-2

是否可以在页面上居中放置表格，以便隐藏超出视口的多余部分？

示例：我有一个包含三列的表格，每列 300 像素宽。如果使用 500 像素宽的浏览器查看，则只有第一列最右边的 100 像素、第 2 列的所有内容（完全位于屏幕中心）和第三列最左边的 100 像素可见。

<head>
    <style type="text/css">
        td { width: 300px; }
        div { margin: 0 auto; width: 100%; overflow: hidden; }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </div>
</body>

上面的示例显示了所有三列，无论浏览器宽度如何。

4

2 回答 2

1

检查是否将该表包含在“div”中并将 div 对齐到中心

于 2013-05-24T07:22:09.377 回答
1

您可以通过将此 css 添加到您的表中来做到这一点：

table{
    position: absolute;
    left: 50%;
    margin-left: -450px; /* half of your table width */
    width: 900px;
}

这将实现您的愿望。您可能还想添加

body{overflow-x: hidden;} /* this will prevent browser from adding bootm scroll bar to the end of your table rigth end. If this fail then try to give some width to body, ie width: 100%; */
于 2013-05-24T07:39:48.860 回答