html - 并排显示表格的行

Question

我有一个表有两列，例如 24 行(从数据库加载，所以它是一个动态表)。现在我希望表格行自动并排显示(因为它适合屏幕)，例如左边有 12 行，右边有 12 行，或者(如果屏幕足够宽)例如三列 8 行等等。 html/css 可以吗？

例子:
这将正常显示表格:

<table>
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
    <tr><td>1.1</td><td>1.2</td></tr>
    <tr><td>2.1</td><td>2.2</td></tr>
</tbody>
</table>

这就是我想要的(并排放置的表格部分数量取决于屏幕大小和表格大小):

<table style="float: left;">
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
    <tr><td>1.1</td><td>1.2</td></tr>
</tbody>
</table>

<table style="float: right;">
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
    <tr><td>2.1</td><td>2.2</td></tr>
</tbody>
</table>

Answer 1

简短回答:如果您需要一些响应性的东西，那么仅使用表格会有点困难。我建议使用 bootstrap + tables。

所以每个表看起来像这样:

<div class="col-xs-6 col-sm-4 col-md-3">
  <table class="blue">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2</td>
      </tr>
    </tbody>
  </table>
</div>

这是一个活生生的例子:https://jsfiddle.net/xwazzo/7x0v9hL6/

请注意，您需要一个大屏幕才能看到 jsfiddle 上的响应。

长答案: 如果你想要响应式表格，CSS Tricks 中有一篇很棒的文章 https://css-tricks.com/accessible-simple-responsive-tables/