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/

Answer 2

如果你有能力使用div而不是table元素，那么我建议使用div编写整个东西并使用css使div像表一样。我写了一个移动第一种方法，所以我将它编码为看起来像移动设备上的标准表，然后当你增加屏幕尺寸时，你会得到你想要的外观。显然，你可以使用断点并调整每个＆＃34;组＆＃34;用于每个屏幕大小以获得所需的适当列数。不幸的是，你必须在每一点都重复你的表格标题，它只是不可避免地做你想做的事情......但是你可以把它们隐藏在手机上。

提示：缩小小提琴上的屏幕以查看＆＃34; mobile＆＃34;表格的版本...展开它以查看更大的表格。演示只有两种尺寸。添加尽可能多的人。

HTML MARKUP：

<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提供的响应式网格布局配合使用，您应该做的就是。

并排显示表格的行

3 个答案: