Question

我的标题可能有点令人困惑，所以我会制作一种方案，我的观点是我想在每一行上都有最大列数，然后将表继续在它下面，如下所示：

| Header 1 | header 2 | header 3 |
| cell 1   | cell 2   | cell 3   |
| Header 4 | header 5 | header 6 |
| cell 4   | cell 5   | cell 6   |

有没有办法让表格做到这一点？

代码看起来非常像这样：

<table class="shop_table" border="1">
  <thead>
    <tr>
      {% for color in color_list %}
      <th class="image_t">{{color.nome}}</th>
      {%endfor%}
    </tr>
  </thead>
  <tbody>
    <tr>
      {% for color in color_list %}
      <td class="image_f">
        <img src="/media/{{ color.imagem }}" style="width:50px;height:50px;" alt=""></a>
      </td>
      {%endfor%}
    </tr>
  </tbody>
</table>

Answer 1

如果我理解正确，是的。

<table>
  <tr>
    <th>table</th>
    <th>header</th>
    <th>here</th>
  </tr>
  <tr>
    <td>table</td>
    <td>row</td>
    <td>here</td>
  </tr>
  <tr>
    <th>table</th>
    <th>header</th>
    <th>here</th>
  </tr>
 <tr>
    <td>table</td>
    <td>row</td>
    <td>here</td>
  </tr>
</table>

编辑：

FOR ERB使用<% @colors.each_slice(3) do |color| %> 这将一次需要三个，因此您可以在代码中正确格式化它。文档：http://ruby-doc.org/core-2.3.1/Enumerable.html#method-i-each_slice

Answer 2

我不完全理解您的问题 - 您是要创建多行，还是将列（标题）始终保持在较低的单元格之上？

你所描述的东西绝对应该是可以实现的，我个人不会建议使用表格。相反，只需创建一个包含header1cell1堆叠在一起的设置，其设置宽度为其父容器的33％。这样做6次，我相信你应该有你想要的布局。

Answer 3

将表格设为弹性容器
在表体，头部和行上使用display: contents以防止它们生成框。通过这种方式，单元格将是弹性项目。
使用order根据需要排列单元格。
使用break-after（旧浏览器page-break-after）强制换行。

我认为目前这只适用于Firefox。

table {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}
thead, tbody, tr {
  display: contents;
}
td {
  display: block;
  border: 1px solid;
}
tbody td:nth-child(n+4) {
  page-break-after: always;
  break-after: always;
}
thead td:nth-child(1), tbody td:nth-child(1) { order: 1; }
thead td:nth-child(4), tbody td:nth-child(4) { order: 2; }
thead td:nth-child(2), tbody td:nth-child(2) { order: 3; }
thead td:nth-child(5), tbody td:nth-child(5) { order: 4; }
thead td:nth-child(3), tbody td:nth-child(3) { order: 5; }
thead td:nth-child(6), tbody td:nth-child(6) { order: 6; }

<table>
  <thead>
    <tr>
      <td>Header 1</td><td>Header 2</td><td>Header 3</td><td>Header 4</td><td>Header 5</td><td>Header 6</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td>
    </tr>
  </tbody>
</table>

HTML / CSS表。只有6个特定数量的列，然后表再次从下面开始

3 个答案: