4

我正在布置一本书的摘录，其中有很多文本和很多表格——棒球排行榜——跨越多个没有固定高度的 CSS 3 列。尤其是这个是一长串的金手套获奖者名单。但是当我在表格中格式化棒球数据时，它不会将自己分成列，所以我只得到一张长表。

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

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

对于表格，我希望它的行为如下所示：

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

如何使表格数据与这些列很好地配合？用 DIV 制作类似表格的东西是我的最佳选择吗？

4

1 回答 1

0

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

例子：

table { display:block; }
tr { display:block; }
td { display:inline-block; }
    td.short { width:100px; }
    td. [etc...]
于 2012-05-03T21:33:37.620 回答