Таблицы HTML/CSS. Имея только 6 определенное количество столбцов, а затем таблица снова начинается ниже

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

Я не полностью понимаю ваш вопрос - вы хотите создать несколько строк, но сохранить столбец (заголовок) всегда выше нижней ячейке?

Кое-что, как вы описываете, обязательно должно быть достижимо, и я лично не рекомендую использовать таблицы вообще. Вместо этого просто создайте тот, который содержит header1cell1, уложенные друг на друга с установленной шириной 33% от родительского контейнера. Сделайте это 6 раз, и я считаю, что у вас должен быть макет, который вы ищете.

Answer 2

Если я правильно понимаю, да.

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

EDIT:

ДЛЯ Еврорадио использовать <% @colors.each_slice(3) do |color| %> Это займет три в то время, так что вы можете отформатировать его правильно в вашем коде. Документация: http://ruby-doc.org/core-2.3.1/Enumerable.html#method-i-each_slice

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>