Html 并排显示表格的行

我有一个表，有两列，例如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>

第1列第2列
1.11.2
2.12.2

这就是我想要的（桌子并排放置的部分数量取决于屏幕大小和桌子大小）：

第1列第2列
1.11.2
第1列第2列
2.12.2

如果不从根本上打破表格的工作方式，标准html表格就不可能实现您想要做的事情（我甚至不确定您是否可以通过某种方式修改CSS以获得您想要的结果）

如@丹尼尔C所建议的，您可能需要考虑使用div代替表。

---

与那些或提供的响应性网格布局合作，您想要做的应该是可能的。

如果不从根本上打破表格的工作方式，您想要在标准html表格中做的应该是不可能的（我甚至不确定您是否可以通过某种方式修改CSS以获得您想要的结果）

如@丹尼尔C所建议的，您可能需要考虑使用div代替表。

---

通过与这些或提供的响应性网格布局合作，您希望做的应该是可能的。

简短回答：如果您需要响应性网格布局，则仅使用表格会有点困难。我建议使用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>

第1列
第2列
1.1
1.2
2.1
2.2

下面是一个活生生的例子：

请注意，您需要一个大屏幕来查看JSFIDLE上的响应页面

长答案： 如果您想要响应表，在CSS技巧中有一篇很好的文章

---

简短回答：如果你需要一些响应性强的东西，只需要桌子就有点难了。我建议使用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>

第1列
第2列
1.1
1.2
2.1
2.2

下面是一个活生生的例子：

请注意，您需要一个大屏幕来查看JSFIDLE上的响应页面

长答案： 如果您想要响应表，在CSS技巧中有一篇很好的文章

---

如果您能够使用div而不是表元素，那么我建议您使用div编写整个过程，并使用css使div看起来像一个表。我写了一个mobile-first方法，所以我把它编码成mobile上的标准表，然后随着屏幕大小的增加，你会得到你想要的外观。显然，您需要使用断点并调整每个“组”对于每个屏幕大小的宽度，以获得所需的适当列数。不幸的是，您必须在每一点上重复您的表标题，这只是不可避免地要做您想要做的事情。。。但是，您可以在手机上隐藏它们

提示：缩小小提琴上的屏幕以查看“移动”版本的桌子。。。展开它以查看更大的。演示只有两种尺寸。你想加多少就加多少

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>

---

如果您能够使用div而不是表元素，那么我建议您使用div编写整个过程，并使用css使div看起来像一个表。我写了一个mobile-first方法，所以我把它编码成mobile上的标准表，然后随着屏幕大小的增加，你会得到你想要的外观。显然，您需要使用断点并调整每个“组”对于每个屏幕大小的宽度，以获得所需的适当列数。不幸的是，您必须在每一点上重复您的表标题，这只是不可避免地要做您想要做的事情。。。但是，您可以在手机上隐藏它们

提示：缩小小提琴上的屏幕以查看“移动”版本的桌子。。。展开它以查看更大的。演示只有两种尺寸。你想加多少就加多少

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>

---

您是否创建了动态表代码/您是否有权访问动态表代码？例如，您可以将其从一个表更改为一系列div吗？是的，这是可能的您是否创建了/您是否有权访问动态表代码？例如，您可以将其从一个表更改为一系列div吗？是的，这是可能的。一旦您关闭html表，您可以使用标准CSS和

@media

查询来执行此操作；优点是它不需要框架，如果

@media

不受支持，它仍然会优雅地降级为一个普通的表。关闭html表后，您可以使用标准CSS和

@media

查询来实现这一点；优点是它不需要框架，如果

@media

不受支持，它仍然会优雅地降级为一个普通的表。这里的问题是在“mobile”上，您仍然可以看到三个单独的表。我相信OP想要看一张标准表？此外，这需要一个框架来工作。然而，你的“长答案”是一个伟大的链接到一个伟大的资源！这里的问题是在“移动”上，您仍然可以看到三个独立的表。我相信OP想要看一张标准表？此外，这需要一个框架来工作。然而，你的“长答案”是一个伟大的链接到一个伟大的资源！