在不使用表的情况下创建类似于表格的网格

Question

请参阅我下面的精彩图片，该图片既不太规模也不完整。但是，我想展示我想要的结构，而不是描述它。

我正在创建一个空间租赁系统，其中类似于下图所构建的日历都显示“拍摄”点，并且还允许用户点击“打开”插槽以自己保留它。我不需要有关功能的帮助，只需要布局。

由于这是最精细的表格数据，有标题和所有内容，我能够轻松地以这种方式创建所需的布局。但是，表格从左向右渲染，因此在下面的示例中，它渲染SPACE 1 9:00 am，SPACE 2 9:00 am，SPACE 3 9:00 am等。我需要它实际渲染SPACE 1 9:00 am，SPACE 1上午10:00等 原因是为了使每个预留成为由下面的蓝色方块表示的“块”，我需要能够垂直地遍历列而不是水平地遍历行。 我还希望列的宽度一致，并且如果添加更多空格或者在路上移除一个/一些空间，则可以灵活。

我一直在玩flexbox，我之前几乎没用过，而且我根本没有运气。我甚至不确定这是正确的方向。

我的问题是1）有没有办法让标准表加载我想要的方式或2）如何在没有表格的情况下做到这一点？

Answer 1

也许bootstrap的网格系统可以满足您的需求。 http://getbootstrap.com/css/

您可以通过添加最多12个列并将其锁定到行中来创建类似网格的结构。