Question

我有一个非常大的表格，无法容纳页面，并且添加了水平滚动条，如下所示：

  .table-x-scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

还有<table class="table-x-scroll">...</table> 但是我也希望表格位于页面的中心。我曾经使用align="center"，但是现在，当我添加display: block时不起作用。桌子总是在左边。我如何同时做这两件事？

Answer 1

最好为表使用包装器，并向该包装器（而不是其自身的表）添加溢出。这样，您可以更好地控制行为。

还可以在桌上使用margin:0 auto将其水平居中。无需display:block

在jsFIddle中查看以下内容或更好的内容

table {
  border: 2px solid red;
  width: 300px;
  margin: 0 auto;
}

td {
  border: 1px solid red;
}

.wrapper {
  width: 100%;
  overflow-x: auto;
}

<div class="wrapper">
  <table>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </table>
</div>

Answer 2

尝试以您的样式添加margin-left:auto; margin-right:auto;并指定width

.table-x-scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  margin-left:auto;
  margin-right:auto;
  width:50%;
}

<table class="table-x-scroll" border="1">
  <tbody>
    <row>
      <td>AA</td>
      <td>BB</td>
    </row>
  </tbody>
</table>

Answer 3

尝试添加保证金：0自动

Device

Answer 4

我可以看到其他人已经回答了对齐问题。但是我看不到“不适合页面”错误，因此这是针对该问题的解决方案：

在CSS中，您指定了overflow-x: auto; 如果将其更改为overflow-x scroll;，它将使其缩放为您选择指定的任何大小。并使其可滚动。里面的滚动条可以编辑/删除，但仍会滚动^^

我个人建议使用vw,vh值例如：

.bunnydiv {font-size: 1vw, 1vh;}这将使其缩放为显示器的宽度和高度的1％。可以使用vh, vw，vh和vw来指定。不需要两个参数，它也会相应地缩放：-）

我找到了我前段时间编写的一些代码，请用作参考：-）

.div_scroll
    {overflow-y: scroll;
        display: block;
            top:0px;
                right: 0px;
                    position: absolute;
                       transform: translate(-23.6vw, 15vh);
                          border: 3px solid #dddddd; 
                             max-height: 75vh;
                                width: 76vw;
                                    margin: 0px;
                                      background-color: white;}

已复制粘贴，并以这种方式设置以提高可读性。除非这样对您更有效，否则不要格式化您的代码：-）

显示带有“ display：block;”的表在页面中心

4 个答案: