继续讨论 如何为 /categories 页面设置样式？：
我有一个与较早的讨论相关的问题。
实现以下效果有多简单：
我目前最接近的效果是：
方法是对包裹表格的 DIV 应用 column-count: 2，并对表格元素应用 display: block。
但我不确定如何强制表头横跨整行 
编辑。
我刚刚意识到，从功能上讲，我要么需要复制这一行表头，要么只保留“分类”字样，要么干脆将其全部隐藏…
3 个赞
我认为，如果你将 tbody 的 display 设置为 block，并将 column-count 设置为 2，可能会更简单？这样 thead 仍然会横跨整个宽度。
不过话说回来，到了那一步，你其实只想保留“类别”这一项，其他都可以隐藏。
3 个赞
使用 flexbox 的替代方案：
.category-list tbody {
display: flex;
flex-wrap: wrap;
}
.category-list tbody tr {
width: 50%;
display: flex;
}
.category-list tbody .category {
flex: 1;
}
不过还需要做一些微调。
9 个赞
在讨论过程中，我差点忘了保持水平对齐会是个不错的想法。
这太棒了 
请注意，使用此 CSS 后，分类将不会按如下方式列出：
1 - 4
2 - 5
3 - 6
而是按如下方式列出：
1 - 2
3 - 4
5 - 6
此外，您还需要添加一个媒体查询，以便在小屏幕上更改样式。
4 个赞
我尝试了这两种方案，看起来将分类表一分为二（而非按顺序排列）更符合我们的需求。
不过，控制在哪里分割确实有些棘手。
我在浏览器中实现了以下效果：
但前提是我人为地将左侧的分类放在一个 div 中（以防止过早分割，否则“Measure”根分类会被分到右列）：
有没有办法通过主题 API 将具有特定分类 ID 的行“打包”到 div 中？
1 个赞
您提出的问题似乎有些棘手，可能需要一些 JavaScript 技巧。
使用 CSS 的 column 属性，我可以肯定分类不会像 flexbox 那样水平对齐（除非您设置了固定高度），而且效果不太美观。
我实现了您想要的效果，但这种方法有点取巧：
我使用了之前的 CSS，然后添加了一个空的 <tr>（我相信这可以通过一行 JavaScript 代码实现），并设置了 order 属性来改变 div 的顺序。后者可以通过 CSS 直接针对每个 data-category-id HTML 值来实现。结果如下：
以下是空的 <tr>：
请注意，每次添加或移除分类时，您可能都需要修改 CSS 和/或 JavaScript。
编辑：如果您只需要一两个额外的空元素，则无需使用 JavaScript 添加 <tr>，也可以使用 :after 和/或 :before，如下所示：
.category-list tbody:after {
width: 1px;
content: "";
}
这会添加一个 1 像素宽的空元素，效果相同。
3 个赞
谢谢，效果相当不错 我们并不介意对分类进行细致管理，所以一切都没问题。
最终效果可以在我们的论坛上看到。
1 个赞
可以分享一下您的论坛链接吗？
1 个赞
当然，我的个人资料里有，我只是不想直接做广告 
2 个赞