具有特定響應能力的表格

Question

可以創建類似於表格的東西（即，它不需要是<table></table>），但在屏幕寬度縮小時按照下面的描述進行轉換？

寬屏幕（普通表）：

------------------------- 
| **th1** | td1.1 | td1.2 | 
| **th2** | td2.1 | td2.2 | 
------------------------- 

中屏幕（用於標題和列休息列）：

----------------- 
| **th1** | td1.1 | 
|   | td1.2 | 
| **th2** | td2.1 | 
|   | td2.2 | 
----------------- 

（在一列只是把一切）

最小屏幕：

--------- 
| **th1** | 
| td1.1 | 
| td1.2 | 
| **th2** | 
| td2.1 | 
| td2.2 | 
--------- 

我一直在尋找這樣的東西，但似乎並不存在。我也考慮過將這些數據放在<dl></dl>之內，並且對此進行了很多搜索，但我似乎沒有發現任何這樣的內容。我已經看到定義列表的解決方案有很多，只有一個定義和一個硬編碼寬度的表格佈局，用於具有多個定義的定義列表，但這並不能真正滿足我的期望。

我的問題是：是否有可能做這樣的事情，或者我對網絡技術要求太高？

我因此到目前爲止最接近的是這樣的：

dt { 
 
    float: left; 
 
    clear: left; 
 
    width: 200px; 
 
    margin: 0; 
 
    padding: 10px; 
 
    font-weight: bold; 
 
} 
 

 
dd { 
 
    float: left; 
 
    width: 200px; 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 

 
/* missing feature: when made less wide, the tdX.2 is under thX and not under tdX.1 */

<dl> 
 
    <dt>th1</dt> 
 
    <dd>td1.1</dd> 
 
    <dd>td1.2</dd> 
 
    <dt>th2</dt> 
 
    <dd>td2.1</dd> 
 
    <dd>td2.2</dd> 
 
</dl>

Answer 1

你可以使用媒體查詢，如果你能調整標記類似象下面這樣：

dt, dd { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 0; 
 
} 
 
@media (max-width: 480px) { 
 
    span { 
 
    display: block; 
 
    } 
 
} 
 
@media (max-width: 320px) { 
 
    dt, dd, span { 
 
    display: block; 
 
    } 
 
}

<dl> 
 
    <dt>th1</dt> 
 
    <dd> 
 
    <span>td1.1</span> 
 
    <span>td1.2</span> 
 
    </dd> 
 
</dl> 
 
<dl> 
 
    <dt>th2</dt> 
 
    <dd> 
 
    <span>td2.1</span> 
 
    <span>td2.2</span> 
 
    </dd> 
 
</dl>

jsFiddle example，調整框架和觀望。

Answer 2

所以這其實是響應式設計的基礎的一部分。因此，不要將像素用於表格單元格寬度，請使用百分比。百分比基於包含該表的元素的寬度。例如，如果它在身體中，那麼這將是屏幕的寬度。如果它是一個寬度爲400px的div或其他東西，那麼它將會是這個百分比。

因此，例如，如果只有3個單元格，則將寬度屬性更改爲33％。

dt { 
    float: left; 
    clear: left; 
    width: 33%; 
    margin: 0; 
    padding: 10px; 
    font-weight: bold; 
} 

dd { 
    float: left; 
    width: 33%; 
    margin: 0; 
    padding: 10px; 
} 

Answer 3

怎麼樣了這一點 - https://jsfiddle.net/4e8v5vrf/6/

HTML

<div class="col-wrapper"> 
    <div class="th-block"> 
    first title 
    </div> 
<div class="td-wrap"> 
     <div class="td-item"> 
      td 1.1 
     </div> 
     <div class="td-item"> 
      td 1.2 
     </div> 
</div> 
</div> <!-- first row close --> 

<div class="col-wrapper"> 
    <div class="th-block"> 
    second title 
    </div> 
<div class="td-wrap"> 
     <div class="td-item"> 
      td 2.1 
     </div> 
     <div class="td-item"> 
      td 2.2 
     </div> 
</div> 
</div> <!-- second row close --> 

CSS

@media (min-width:991px) { 
.td-item { 
    display:inline-table; 
} 
} 

@media (min-width:768px) { 
    .th-block, .td-wrap { 
    display:inline-table;. 
    vertical-align:top; 
    } 
} 

我還製作了一個帶有引導 - https://jsfiddle.net/4e8v5vrf/4/

希望有幫助！

Answer 4

既然你提到它，我肯定會用的div元素代替表，如表更難管理，尤其是在敏感的佈局。我也想在這裏使用一些jQuery，但沒有什麼嚴重的。

HTML

<div id="sections"> 
    <section class="row-1"> 
    <p> **th1** </p> 
    <p> **th2**</p> 
    </section> 

    <section class="row-2"> 
    <p class="row2-first">td1.1</p> 

    <p class="row2-second">td2.1 </p> 
    </section> 

    <section class="row-3"> 
    <p class="row3-first">td1.2 </p> 

    <p class="row3-second">td2.2 </p> 
    </section> 
</div> 

CSS：

.row-1 { 
    width: 33.3333%; 
    float: left; 
} 

.row-2 { 
    width: 33.3333%; 
    float: left; 
} 

.row-3 { 
    width: 33.3333%; 
    float: left; 
} 

@media all and (max-width: 799px) { 
    .row-1, 
    .row-2, 
    .row-3 { 
    width: 50%; 
    float: left; 
    } 
} 

@media all and (max-width: 499px) { 
    .row-1, 
    .row-2, 
    .row-3 { 
    width: 100%; 
    float: none; 
    } 
} 

的jQuery：

jQuery(document).ready(function($){ 

if ($(window).width() < 800 && $(window).width() > 500) { 
    $(".row3-first").insertAfter(".row2-first"); 
    $(".row3-second").insertAfter(".row2-second"); 
} 
else { 
    //do nothing 
} 
}); 

jQuery(document).ready(function($){ 

if ($(window).width() < 500) { 
    $(".row2-first").insertAfter(".row1-first"); 
} 
else { 
    //do nothing 
} 
}); 

我現在的例子並沒有做什麼喲你想要的，因爲我需要爲這個例子創建更多的CSS類來根據你的圖像完全重新排列元素，但是我認爲你可以得到一個關於如何完成它的想法。您只需添加多個CSS類並創建（實際上覆制 - 粘貼）insertAfter函數。所以現在都是關於組合。

您可以查看Codepen上的工作示例。

Answer 5

儘管the answer of Pangloss非常有幫助，但我想與您分享我的最終解決方案，因爲我發現它在語義上比提出的多個定義列表更清晰。缺失的東西當然就像是一個<di>標籤來創建漂亮的定義列表。

th { 
 
    display: inline-block; 
 
    min-width: 400px; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 

 
td { 
 
    display: inline-block; 
 
} 
 

 
span { 
 
    display: block; 
 
    min-width: 400px; 
 
} 
 

 
@media (min-width: 800px) { 
 
    span { 
 
    display: inline-block; 
 
    } 
 
}

<table> 
 
    <tr> 
 
    <th>th1</th> 
 
    <td> 
 
     <span>td1.1</span> 
 
     <span>td1.2</span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <th>th2</th> 
 
    <td> 
 
     <span>td2.1</span> 
 
     <span>td2.2</span> 
 
    </td> 
 
    </tr> 
 
</table>

注：通過使用表格，類似的東西可以作爲Pangloss的答案說明，但所有數據保持一起完成的大min-width是能夠看到所有可能的狀態在我的屏幕上...