javascript - 如何在 2 列中显示多个 html 表格

Question

我有一个在 jQuery 上运行的应用程序，它获取一些数据并通过将新创建的表附加到 div 元素内来创建 html tables。
这些表格显示得很好，但我希望它们彼此相邻显示，以便用户可以 2 × 2 地看到它们，并避免一直上下滚动。

代码结构:

<div id=example>
 <table id=1>
  <tr>
   <td>..</td><td>..</td>
  </tr>
 <table>
 <table id=2>
  <tr>
   <td>..</td><td>..</td>
  </tr>
  more rows..
 <table>
</div>

表格具有动态行数，并且某些行具有不同数量的单元格。

想要的结果是:

表1 |表2
表3 |表4
表 5 |表6
等等

如何在 html 中(构建表格时)或使用 jQuery 选择器和过滤器来做到这一点？

Answer 1

如果您使用 bootstrap，您可以使用他们的网格系统:Bootstrap Grid System

如果不这样做，那么您可以将表格放入宽度为 50% 的父 div 中，然后将两个父 div 放入另一个宽度为 100% 的 div 中。由于表格宽度和屏幕宽度等，它可能会变得困惑。

如果您还没有使用 CSS 框架，我强烈建议您使用它。