CSS將表格列轉換爲全寬度堆疊元素

我發現了許多方法來創建「無表格」表格佈局，只使用DIV，但對於相反的情況很少。CSS將表格列轉換爲全寬度堆疊元素

我有一個以上的表格結構的HTML頁面，他們都指的是一個普通的CSS文件。該表有一個簡單的2列布局如下：

<table> 
    <tbody> 
    <tr> 
     <th>category</th> 
     <td>description</td> 
    </tr> 
    <tr> 
     <th>category</th> 
     <td>description</td> 
    </tr> 
    </tbody> 
</table>

我希望能夠通過CSS只轉換表的佈局，以使它看起來像一個「單列表'如果你願意，在表格的整個寬度範圍內將類別和描述疊加在另一個上面。我試過顯示：塊和寬度：100％，但它不起作用跨瀏覽器。

想法？

來源

2013-04-16 Paco Giurfa Ley

對於Internet Explorer（至少<= 9）我會說：忘了它！該瀏覽器不能確信將表格行/單元格顯示爲其他任何內容。 – CBroe

我真的希望你錯了：/ –

如果你每個細胞都有float，你可以達到你想要的效果。請參閱本演示：http://jsfiddle.net/t3ZaM/

適用於FF，Chrome，Opera，Safari，IE9和10，但我無法檢查舊版IE，因爲我沒有它們。

來源

2013-04-16 14:31:23 otinanai

我只是在IE 7/8上試過這個，並且它不工作。我開始認爲CBroe所說的是真實的： –

我確定必須有一種解決方法，如果我只能在較舊的IE版本中測試...... – otinanai

沒關係，我犯了一個錯誤，它可以很好地運行IE8 +。謝謝！ –

CSS將表格列轉換爲全寬度堆疊元素

回答

相關問題