如何在CSS 3列上製作表格或類似表格的流程？

我正在編寫一本書摘，其中有很多文字和大量的表格 - 棒球排行榜 - 流過多個CSS 3列，沒有固定的高度。特別是金手套獲獎者的名單很長。但是當我將表格中的棒球數據格式化後，它不會將自己分解成列，所以我只得到一個長表。如何在CSS 3列上製作表格或類似表格的流程？

也就是說，用文字爲主的「頁面」我一直在做這樣的事情，然後在500個字從摘錄，這已經良好

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

曾與我的表粘貼想聽聽它根據這樣的行爲：

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

我怎樣才能讓表格數據與這些列發揮很好？我的最佳選擇是從DIV中製作類似桌面的東西嗎？

來源

2012-04-28 Dan Moore

表格數據===表本身不格式化成列？不知道你是如何嘗試格式化或用什麼...但你總是可以手動複製/粘貼表格元素，如thead，th，tbody，tr，td等。 – albert 2012-04-29 03:05:55

你可以在[現場演示]中重現這一點嗎？（http://jsfiddle.net/）？我無法想象你的描述中的問題...... = / – 2012-04-29 12:43:46

您將基本上需要從元素中刪除表格顯示並將每行轉爲display:block;，並且「表格」的每個單元格都有display:inline-block;和所需的寬度。理論上你可以在當前表格上用CSS來做到這一點，所以它可以很好地降解，或者你可以使用或<span>或類似的東西。無論採用哪種方式，您都需要將表格從當前的顯示模式切換到每行都是自己的塊元素的表格。

實施例：

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

來源

2012-05-03 21:33:37

如何在CSS 3列上製作表格或類似表格的流程？

回答

相關問題