HTML/CSS響應表

我已經建立了一個簡單的訂單，包括髮貨，賬單和銀行賬戶持有人的地址。眼下的事情被格式化爲一個大的HTML表：HTML/CSS響應表

+---------+---------+----------+----------+ 
|   | DelAddr | BillAddr | BankAddr | 
| Name |   |   |   | 
| Street |   |   |   | 
| City |   |   |   | 
| Country |   |   |   | 
| Tel  |   |   |   | 
+---------+---------+----------+----------+

當然，這不響應，並期待在手機上不正確，因爲我用的是WordPress的模板是一個負責任的一個。

我如何（沒有JS如果可能的話），使表響應，這樣當視口變小，它看起來像

+---------+---------+ 
|   | DelAddr | 
| Name |   | 
| Street |   | 
| City |   | 
| Country |   | 
| Tel  |   | 
+---------+---------+ 
|   | BillAddr| 
| Name |   | 
| Street |   | 
| City |   | 
| Country |   | 
| Tel  |   | 
+---------+---------+ 
|   | BnkAddr | 
| Name |   | 
| Street |   | 
| City |   | 
| Country |   | 
| Tel  |   | 
+---------+---------+

的是，即使有可能單獨使用CSS？難點是在每個「分割」行上顯示描述列。

來源

2013-02-01 Skynet

爲什麼不使用divs而不是表格？這使得輕鬆實現響應式佈局。 –

@SvenBieder這個特定實例的問題是，在桌面視圖中，每個地址的元數據僅在左側列出一次，而在所需的移動視圖中，元數據在每一行中被複制以對應於地址條目。 – Phire

@Phire，因爲你認爲你的用戶是文盲，他們不知道如何建立一個地址？ –

克里斯科爾有一個非常好的文章：Responsive Data Tables。

這裏的報價：

最大的變化是，我們要迫使表不通過設置每個表相關的元素是塊級表現得像一個表。然後通過保留我們原來添加的斑馬條紋，就像每個表格行本身變成一張表格，但只有屏幕一樣寬。沒有更多的水平滾動！然後，對於每個「單元格」，我們將使用CSS生成的內容（：before）來應用標籤，因此我們知道每一位數據的含義。

來源

2013-02-01 18:10:25

這是可怕的混亂。更好的辦法是使用媒體查詢來做兩個表並隱藏一個表。 – Puzbie

@FacebookAnswers - 我無法反駁更多。你應該*永遠不*重複你的內容。 –

好吧，只會顯示一個版本，所以在技術上你不是。真的，搜索引擎可能會反對，但鑑於我們正在討論表格數據，無論如何這可能會重複，我認爲這不是一個問題。除此之外，誰還要索引帳單表單？我唯一說的就是不要這樣做，如果你不得不自己輸入表格，但我在這裏懷疑是這種情況。服務器語言可以像生成一個表一樣輕鬆地生成兩個表。 – Puzbie

你也許可以使用bootstrap它完全免費，非常適合響應式設計......而且我認爲你不需要js。它仍然包括它是一個偉大的庫房

來源

2013-02-01 22:43:33

回答

相關問題