Question

是否可以将表格置于页面中心，以便隐藏在视口外部的多余部分？

示例：我有一个包含三列的表，每列宽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>

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

Answer 1

检查并将该表包含在“div”中并将div对齐

Answer 2

您可以通过将此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%; */

中心表，隐藏多余部分

2 个答案: