可能用CSS重建表格嗎？

是否有可能重建一個表看起來像這樣：可能用CSS重建表格嗎？

<table> 
    <tr> 
     <td>information 1</td> 
     <td>information 2</td> 
    </tr> 
</table>

到像這樣的CSS？：

<table> 
    <tr> 
     <td>information 1</td> 
    </tr> 
    <tr> 
     <td>information 2</td> 
    </tr> 
</table>

爲什麼我問的是，因爲這個表，這是在充滿內容一個div，當我最小化移動顯示器的div時看起來不太好。

更新，爲什麼我需要這樣做：我們正在爲需要響應式設計的客戶構建網站。「問題」在於客戶不知道html/css是否合適，所以他/她在向頁面提供內容時使用所見即所得的編輯器。當然，他/她知道微軟Office，並使用表格構建像在該程序中完成的內容。

在那裏應該是在第一和第二碼塊之間的差？ – crowjonah

看看tr :) – Marc

那麼，你想要使用CSS將單元格移動到另一行？總之..沒有。從技術上講，你可以讓它看起來像這樣，但那會是一些簡單的CSS。 –

您可以有效地包裝td s通過使用媒體查詢和應用css浮動單元格看起來像下一行。儘管如此，您仍然希望提供一些很好的視覺隊列來幫助人們瞭解他們所看到的內容。 Here's a fiddle demonstration - 調整預覽窗口的大小。

使用原來的標記，應用以下CSS將包裹第二td當窗口小於400像素寬：

td {width: 200px; border: 1px solid black;} 
@media screen and (max-width: 400px) { 
    td { 
     width: 100%; 
     float: left; 
    } 
}

2012-09-18 19:55:52 crowjonah

謝謝，這解決了它。希望。 :) – Raskolnikoov

你不能用css（至少不容易）這樣做，因爲這隻會影響標記的表示。如果您發現用戶使用移動瀏覽器訪問您的網站，您當然可以使用javascript來做到這一點。然而，你如何做這些事情的問題遠遠超出了原始問題的範圍。

很多網站都有移動版本和非移動版本。有預先編寫的腳本來檢測PHP，Javascript等用戶代理等。

2012-09-18 19:52:25 thatidiotguy

我們正在爲需要響應式設計的客戶構建網站。「問題」在於客戶不知道html/css是否合適，所以他/她在向頁面提供內容時使用所見即所得的編輯器。當然，他/她知道微軟Office，並使用表格構建像在該程序中完成的內容。 :) – Raskolnikoov

@Raskolnikoov - 那麼你做錯了！如果客戶給你的設計格式不包含乾淨的'html'，則重寫它！或者最好，讓他們用photoshop嘲笑它，然後自己創建這個東西！ – bPratik

我明白你的問題，這將解決這個問題。（難看固定）

td { 
    display: block; 
    clear: both; 
}

而是使用的div和CSS，不表在所有）

2012-09-18 19:56:47

如果它的表格數據，表格是適當的。 – Mark

在IE上不起作用。 –

回答