在小屏幕上使用 div 將響應式表格布局折疊為 2 列

Question

當前創建了以下 div 表，如何獲取列 |3| 和 |4| 下 |1| 和 |2| 分別取決於寬度。

當前結果：
|1| |2| |3| |4|
|1| |2| |3| |4|

想要的結果：
|1| |2|
|1| |2|
|3| |4|
|3| |4|
或者
|1| |2|
|3| |4|
|1| |2|
|3| |4|

 .product-info-table{ display: table; width: 100%; } .product-info-table-body { display: table-row-group; } .product-info-table-row { display: table-row; } .product-info-table-cell { border: 1px solid #999999; display: table-cell; padding: 3px 10px; }

 <div class="product-info-table"> <div class="product-info-table-body"> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> <div class="product-info-table-cell">Heading</div> <div class="product-info-table-cell">Text</div> </div> </div> </div>

Answer 1

您可以使用媒體查詢來檢測屏幕寬度，然后在小屏幕上使用網格布局而不是表格布局。

我還建議為“移動優先”添加 CSS，即默認 CSS 用於移動顯示，然后在媒體查詢中檢測更大的屏幕並應用您的表格布局。 去做這個：

1. 在product-info-table-row上為網格布局添加 CSS - 其余的 div 只需要默認顯示，因此您不需要添加任何其他內容（除了要應用的任何樣式，例如單元格上的邊框） )

    .product-info-table-row { display: grid; /* Display as 2 columns: col 1 has width 30%, col 2 is allocated the rest */ grid-template-columns: 30% auto; }

2. 將您現有的表格布局 css 包裝在合適的媒體查詢中，例如

   @media screen and (min-width: 600px) { /* Your existing table-display CSS goes here */ }

就是這樣！ 工作示例：

 .product-info-table-row { display: grid; grid-template-columns: 30% auto; } .product-info-table-cell { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } @media screen and (min-width: 600px) { .product-info-table { display: table; width: 100%; } .product-info-table-body { display: table-row-group; } .product-info-table-row { display: table-row; } .product-info-table-cell { display: table-cell; } }

 <div class="product-info-table"> <div class="product-info-table-body"> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading 1</div> <div class="product-info-table-cell">Text 1</div> <div class="product-info-table-cell">Heading 2</div> <div class="product-info-table-cell">Text 2</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading 1</div> <div class="product-info-table-cell">Text 1</div> <div class="product-info-table-cell">Heading 2</div> <div class="product-info-table-cell">Text 2</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading 1</div> <div class="product-info-table-cell">Text 1</div> <div class="product-info-table-cell">Heading 2</div> <div class="product-info-table-cell">Text 2</div> </div> <div class="product-info-table-row"> <div class="product-info-table-cell">Heading 1</div> <div class="product-info-table-cell">Text 1</div> <div class="product-info-table-cell">Heading 2</div> <div class="product-info-table-cell">Text 2</div> </div> </div>