響應數據表 - 優文庫

我正在嘗試使響應數據網格可以根據屏幕寬度更改佈局。我知道如何使用媒體查詢，但我試圖找出構建實際數據網格的最佳方法。我應該使用表格，div還是列表？響應數據表

如果用戶在桌面上，表格應該呈現如下圖所示：正如您所看到的，我的標題項在左側，數據值在右側。

表頭項目1 |第1行值1 |第1行值| |第1行值| |

表頭項目2 |第2行值1 |第2行值| |第2行值| |

但是，如果用戶減少了我想繼續前進行頂部的標題項目和值以下

表頭項目屏幕尺寸1
行1值1 |第1行值| |

表頭項目2
第2行數值1 |第2行值| |

我在想使用Div的可能是我最好的方式來得到這個結果，但沒有任何其他建議嗎？

謝謝！

來源

2012-02-08 fivepix

如果是表格數據，使用'

'是最好的方法。爲了使它成爲「響應式」，那麼所有人都需要幾個媒體查詢來根據視口大小更新表格。 – rxgx2012-02-08 01:57:24

回答

This是一個關於隱藏基於屏幕寬度的元素的神奇文章。您可以使用一些CSS媒體查詢打開和關閉某些「可選」或「基本」類別的元素。希望這可以幫助！

來源

2012-02-08 03:03:34 Stevie

如何這種類型的東西 - 集合中的小區內聯表：

<html> 
<head> 
    <style> 
    #data{width:70%;} 
    #data td {display:inline-table;padding:20px;} 
    </style> 

</head> 
<body> 

<table id="data"> 
    <tr><th>Header 1</th> 
     <td>row 1 cell 1</td><td>row 1 cell 2</td> 
    </tr> 
    <tr><th>Header 2</th> 
     <td>row 2 cell 1</td><td>row 2 cell 2</td> 
    </tr> 
</table> 
</body> 
</html>

來源

2012-10-28 17:48:46 paulusm

從我個人的經驗，最好是用DIV超過表繼續前進。在分析您的需求div將是最合適的選擇。

來源

2013-08-07 09:56:57

相關問題