Как в html таблице (table) сделать перенос строки с “слева направо” на “сверху вниз”?

274

28 декабря 2017, 22:52

Есть таблица характеристик, которая автоматически выводится на сайте после заполнения характеристик товара.

Сейчас вывод характеристик выглядит так:

Тип хар.1 | Тип хар.2
Тип хар.3 | Тип хар.4
Тип хар.5 | Тип хар.6
Тип хар.7

То есть ячейки идут с слева на право. Вот собственно код подобной таблицы: http://cssdeck.com/labs/mw6z7vi8

Мне же надо чтобы таблица выглядела так (строки сверху вниз):

Тип хар.1 | Тип хар.5
Тип хар.2 | Тип хар.6
Тип хар.3 | Тип хар.7
Тип хар.4

Пробовал с flex сделать, но он не растягивает ячейки по ширине, а также требует фиксированную высоту: http://cssdeck.com/labs/yqtm4rs0

Что можете посоветовать в данном случае?

Answer 1

Предлагаю такое решение:

table, 
td { 
  transform: rotate(-90deg) scaleX(-1); 
  background-color: pink; 
} 
 
div { 
  background-color: olive; 
}

<div> 
  <table> 
    <tr> 
      <td>11</td> 
      <td>22</td> 
      <td>33</td> 
    </tr> 
    <tr> 
      <td>44</td> 
      <td>55</td> 
      <td>66</td> 
    </tr> 
  </table> 
</div>

Это разумеется шутка )) но что интересно визуально решает проблему. Только вот резмеры в контейнере остались нетрансформированными

Answer 2

Почти верное решение получилось. Но надо подобное сделать без использования height, так как строк может быть разное количество, да и высота строк тоже разная.

table { 
  width: 100%; 
} 
 
tbody { 
  display: flex; 
  flex-flow: column wrap; 
  flex-direction: column; 
  outline: 1px solid #a52a2a; 
  height: 150px; 
} 
 
tr { 
  display: block; 
  width: 50%; 
  outline: 1px solid #a52a2a; 
  height: 50px; 
}

<table><tbody> 
<tr><td>item1</td></tr> 
<tr><td>item2</td></tr> 
<tr><td>item3</td></tr> 
<tr><td>item4</td></tr> 
<tr><td>item5</td></tr> 
</tbody></table>

Answer 3

Остановился пока на таком варианте:

@media (min-width:460px) { 
table { 
  column-count: 2; 
  display: block; 
  width: 100%; 
  column-gap: 2em; 
} 
} 
 
tr { 
  outline: 1px solid #a52a2a; 
} 
 
td { 
  width: 100%; 
}

<table> 
  <tbody> 
    <tr><td>Тип</td><td>Акриловая1</td></tr> 
    <tr><td>Тип</td><td>Акриловая2</td></tr> 
    <tr><td>Тип</td><td>Акриловая3</td></tr> 
    <tr><td>Тип</td><td>Акриловая4</td></tr> 
    <tr><td>Тип</td><td>Акриловая5</td></tr> 
  </tbody> 
</table>

Answer 4

Для того чтобы работать с элементами таблицы как с блочными элементами их нужно переопределить с помощью display. Пример с использованием columns:

table { 
  display: block; 
  border: 1px solid black; 
  margin-bottom: -1px; 
  width: 100%; 
} 
 
tbody { 
  display: block; 
  margin-bottom: -1px; 
  list-style: none; 
  -webkit-columns: 2; 
  -moz-columns: 2; 
  columns: 2; 
  -webkit-column-width: 50%; 
  -moz-column-width: 50%; 
  -moz-column-fill: balance; 
  column-fill: balance; 
  column-width: 50%; 
  -webkit-column-gap: 0; 
  -moz-column-gap: 0; 
  column-gap: 0; 
  -webkit-column-rule: 1px solid black; 
  -moz-column-rule: 1px solid black; 
  column-rule: 1px solid black; 
} 
 
tr { 
  display: block; 
} 
 
td { 
  display: block; 
  border-bottom:1px solid black; 
}

<table> 
  <tbody> 
    <tr> 
      <td>item1</td> 
    </tr> 
    <tr> 
      <td>item2</td> 
    </tr> 
    <tr> 
      <td>item3</td> 
    </tr> 
    <tr> 
      <td>item4</td> 
    </tr> 
    <tr> 
      <td>item5</td> 
    </tr> 
  </tbody> 
</table>