按列填充HTML表格

Question

我有一组数据，我试图在响应式网格中显示，具体取决于视口的大小。

这些数据按字母顺序排列，为了便于阅读，我想按列顺序显示：

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

在具有更宽视口的桌面上，这可能如下所示：

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

但是，由于表是响应式的，因此列数（以及行数）可能会发生变化。通过使用.col-md-3（例如）并使额外的项目溢出到下一行，可以很容易地按行使用Twitter Bootstrap来执行此操作。但是，我希望按行垂直填充表格。

有没有办法只使用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;}