Question

我正在动态生成N个表。我不知道会提前有多少（也不是行或列的数量，尽管我可以在尝试渲染表之前计算它，如果有必要的话）。

根据规范，表格必须并排。当它们超过水平宽度时，页面应该引入水平滚动。

我似乎有时会得到一个而不是另一个。我现在拥有的是div的父overflow-x:auto，然后是每个div的{{1}}嵌套float:left标签，但无济于事。

有一些相关的StackOverflow问题，但没有一个问题解决了我的问题：

下面的代码和小提琴：

<table>

Live Fiddle

如果内容变得过宽，如何同时将两个或多个表并排写入水平滚动？

编辑：以下答案运行良好，请注意，启用兼容模式的Internet Explorer无法运行（要检查，您可以＆＃34;检查元素＆＃34;并导航到＆＃34;文档模式＆＃34;看它是否表示类似＆＃34; 5＆＃34;（差）或＆＃34; Edge＆＃34;（好））

Answer 1

您可以在外部div上添加white-space:nowrap，并将float:left替换为内部div上的display:inline-block：

要删除IE11上的垂直滚动条，请删除外部div上的height:60px;。

＆＃13;

<div style="width:100px; border: 1px solid black; overflow-x: auto; font-size: 14px;float:left; white-space: nowrap">
  <div style="display:inline-block;margin-right:10px">
    <table border=1 cellpadding=10 style="float:left">
      <th>Lorem</th><th>Ipsum</th><th>Sit</th><th>Dolor</th><th>Amet</th>
    </table>
  </div>
  <div style="display:inline-block;margin-right:10px">
    <table border=1 cellpadding=10 style="float:left">
      <th>Lorem2</th><th>Ipsum2</th><th>Si2t</th><th>Dolor2</th><th>Amet2</th>
    </table>
  </div>
</div>

＆＃13;

更新了小提琴：http://jsfiddle.net/bsod7ejm/1/

此外，如果您希望表之间没有空格，您可以在父div上放置font-size:0;，在内部div上放置font-size:12px（或任何您想要的内容）。我还建议使用样式表而不是内联样式：

＆＃13;

.outer {
  width:100px;
  border: 1px solid black;
  overflow-x: auto;
  font-size: 14px;
  float:left;
  white-space: nowrap;
}

.inner {
  display:inline-block;
  margin-right:10px;
}

.inner table {
  float: left;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <table border=1 cellpadding=10>
      <th>Lorem</th><th>Ipsum</th><th>Sit</th><th>Dolor</th><th>Amet</th>
    </table>
  </div>
  <div class="inner">
    <table border=1 cellpadding=10>
      <th>Lorem2</th><th>Ipsum2</th><th>Si2t</th><th>Dolor2</th><th>Amet2</th>
    </table>
  </div>
</div>

＆＃13;

Answer 2

您可以使用flexbox。

＆＃13;

div {
  overflow-x: auto;
  max-width: 100%;
  display: flex;
}

table {
  margin: 0 10px;
}

＆＃13;

<div>
  <table border=1 cellpadding=10 cellspacing=0>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Sit</th>
      <th>Dolor</th>
      <th>Amet</th>
    </tr>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Sit</th>
      <th>Dolor</th>
      <th>Amet</th>
    </tr>

  </table>
  <table border=1 cellpadding=10 cellspacing=0>
    <th>Lorem2</th>
    <th>Ipsum2</th>
    <th>Si2t</th>
    <th>Dolor2</th>
    <th>Amet2</th>
  </table>
</div>

＆＃13;

或者您也可以将display:inline-table;和white-space: nowrap;用于父级，我猜不需要花车。

＆＃13;

div {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

table {
  margin: 0 10px;
  display:inline-table;
}

＆＃13;

<div>
  <table border=1 cellpadding=10 cellspacing=0>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Sit</th>
      <th>Dolor</th>
      <th>Amet</th>
    </tr>
    <tr>
      <th>Lorem</th>
      <th>Ipsum</th>
      <th>Sit</th>
      <th>Dolor</th>
      <th>Amet</th>
    </tr>

  </table>
  <table border=1 cellpadding=10 cellspacing=0>
    <th>Lorem2</th>
    <th>Ipsum2</th>
    <th>Si2t</th>
    <th>Dolor2</th>
    <th>Amet2</th>
  </table>
</div>

＆＃13;

div中并排表格加上水平滚动

Live Fiddle

2 个答案: