Заполните таблицу HTML контентом по столбцу

Question

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

Эти данные алфавитные, и разборчивость, я хотел бы, чтобы отобразить его в порядке по столбцам:

|---------|--------|--------| 
| Abi  | Donald | George | 
| Boris | Ernest | Harold | 
| Charlie | Frank | Ivan | 

На рабочем столе, с более широким видовомом, это может выглядеть следующим образом:

|-------|---------|--------|--------|------| 
| Abi | Charlie | Ernest | George | Ivan | 
| Boris | Donald | Frank | Harold |  | 

Однако, поскольку таблица реагирует, количество столбцов (и, следовательно, строк) может измениться. Легко это сделать с помощью Twitter Bootstrap by row, используя .col-md-3 (например) и позволяя дополнительным элементам переполняться на следующую строку. Тем не менее, я хочу заполнить таблицу по вертикали, по столбцу.

Есть ли способ сделать это только с CSS (например, без необходимости переупорядочивать и вычислять с помощью Javascript)?

Answer 1

это очень легко, и вы все еще можете использовать Bootstrap, как это:

<div class="mydata col-lg-3 col-md-3 col-sm-6 col-xs-12"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div> 

Однако, если вы хотите, наоборот, попробуйте

<div class="mydata col-lg-12 col-md-6 col-sm-3 col-xs-6"><ul><li>Abi</li> <li>Boris<li> <li> Charlie</li></ul></div> 

Тогда в вашем CSS

.mydata ul{display:block;} 
.mydata li{display:inline-block;}