Question

这是我的HTML：

<body>
    <div class="horizontal-scroller">
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
        <table class="float-left">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>
        </table>
    </div>
</body>

和CSS：

.float-left {
  float: left;
}

.horizontal-scroller {
    overflow-x: auto;
}

我试图获得所有三个表出现在同一行的效果，无论包含div的大小。当页面足够宽以适合它们时，此示例很有效。但是当我缩小页面的大小时，表开始包装。我不希望这种情况发生。相反，我想在div上显示一个水平滚动条，以便用户可以滚动查看它们。我怎样才能做到这一点？

Plunker示例：https://plnkr.co/edit/ffSvoraDERVgdi1RFF31?p=preview

Answer 1

父级上的

display: flex会将其置于弹性row

中

/* Styles go here */

.horizontal-scroller {
    overflow-x: auto;
    display: flex;
}

<div class="horizontal-scroller">
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        </tr>
      </table>
</div>

Answer 2

这可以通过将每个表格包装在<div>并使用display: inline-block和white-space: nowrap的组合来实现。

您的HTML可能如下所示：

<div class="wrapper">
  <div class="child">
    <table>
      <tr>
        <td>Cell 1</td>
      </tr>
    </table>
  </div>
  <div class="child">
    <table>
      <tr>
        <td>Cell 2</td>
      </tr>
    </table>
  </div>
  <div class="child">
    <table>
      <tr>
        <td>Cell 3</td>
      </tr>
    </table>
  </div>
</div>

然后CSS可以执行以下操作：

.wrapper {
  white-space: nowrap;
  overflow-x: auto;
}

.child {
  display: inline-block;
}

以下是完整示例：https://jsfiddle.net/xzd0dqhk/

左对齐一组表，以便它们都出现在同一行上

2 个答案: