如何在CSS 3列中创建表格或类似表格的流程？

Question

我正在制作一本书摘录，里面有很多文字和很多桌子 - 棒球排行榜 - 流过多个没有固定高度的CSS 3列。这个特别是一个长而窄的金手套获奖者名单。但是当我在表格中格式化棒球数据时，它不会将自己分解成列，所以我只得到一个长桌。

也就是说，在文字繁重的“页面”中，我一直在做这样的事情，然后从摘录中粘贴500个单词，效果很好 -

-webkit-column-width: 205px;
-webkit-column-gap: 20px;

对于表格，我希望它的行为符合以下内容：

-webkit-column-count: 2;
-webkit-column-gap: 20px;

如何使表格数据与这些列完美匹配？我最好选择用DIV制作表格吗？

Answer 1

您基本上需要从元素中删除表格显示，并将每行转换为display:block;，并且“表格”的每个单元格都具有display:inline-block;和所需的宽度。理论上，您可以在当前表上使用CSS执行此操作，以便它可以很好地降级，或者您可以将<div>用于<span> s或类似的东西。无论哪种方式，您都需要将表从当前的显示模式中分解为每行都是其自己的块元素。

示例：

table { display:block; }
tr { display:block; }
td { display:inline-block; }
    td.short { width:100px; }
    td. [etc...]