并排显示表格的行

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 + 表格。

所以每张桌子都会是这样的：

<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/

Answer 2

如果您能够使用 div 代替表格元素，那么我建议您使用 div 编写整个内容并使用 css 使 div 像表格一样。我编写了一个移动优先的方法，所以我将它编码为看起来像移动设备上的标准表格，然后随着屏幕尺寸的增加，你会得到你想要的外观。显然，您会使用断点并调整每个“组”对于每个屏幕尺寸的宽度，以获得您想要的适当数量的列。不幸的是，您必须在每一点重复您的表格标题，这只是不可避免地做您想做的事情......但是您可以将它们隐藏在移动设备上。

提示：缩小小提琴的屏幕以查看“移动”版本的表格...展开以查看更大的表格。演示只有两种尺寸。想添加多少就添加多少。

HTML 标记：

<div class="table">
 <div class="group">
  <div class="table-row table-head table-head-main">
   <div class="table-cell">Col 1</div>
   <div class="table-cell">Col 2</div>
  </div>
  <div class="table-row">
   <div class="table-cell">1.1</div>
   <div class="table-cell">1.2</div>
  </div>
 </div>
 <div class="group">
  <div class="table-row table-head">
   <div class="table-cell">Col 1</div>
   <div class="table-cell">Col 2</div>
  </div>
  <div class="table-row">
   <div class="table-cell">2.1</div>
   <div class="table-cell">2.2</div>
  </div>
 </div> 
</div>

CSS 代码：

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
  width: 100%;
}

.table-head div {
  background: #cccccc;
}

.table-cell {
  display: table-cell;
  border: 1px dotted #000000;
}

.table-head {
  display: none;
}

.table-head-main {
  display: table-row;
}

.group {
  display: table-row-group;
}

@media (min-width: 600px) {
  .table-head {
    display: table-row;
  }
  .group {
    display: table;
    float: left;
    width: 50%;
  }
}

https://jsfiddle.net/5s3cz15t/1/

Answer 3

如果不从根本上破坏表格的工作方式，您想要做的事情不应该使用标准 html 表格来实现（而且我什至不确定您是否可以修改 CSS 以获得您想要的结果）。

正如@Daniel C 所建议的，您可能需要考虑使用 div 而不是表格。

与Bootstrap 或Foundation 提供的响应式网格布局配合使用，您想做的事情应该是可能的。