如何使我的表在行動視圖中按行摺疊

我試圖將響應表添加到我的網站中的iframe。桌面在桌面上看起來不錯，但在移動視圖中看起來不錯我已經嘗試了@media使表逐行摺疊，以便每行的第一個單元格將在一列中垂直對齊。如何使我的表在行動視圖中按行摺疊

|-------------------------------------------------| 
| row head1  | data1 |    data2 | 
|-------------------------------------------------| <--my table 
| row head2  | data3 |    data4 | 


|--------------------| 
| row head1  | <- i want to have this in mobile view 
|--------------------| 
| data1   | 
|--------------------| 
| data2   | 
|--------------------| 
| row head2  | 
|--------------------| 
| data3   | 
|--------------------| 
| data4   | 
|--------------------|

任何我在下面做錯了嗎？

<style type="text/css"> 
 
.tg {border-collapse:collapse;border-spacing:0;border-color:#ffffff;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;} 
 
.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;} 
 
.tg .tg-yzt1{background-color:#efefef;vertical-align:top} 
 
.tg .tg-cxkv{background-color:#ffffff} 
 
.tg .tg-bsv2{background-color:#efefef} 
 
.tg .tg-3we0{background-color:#ffffff;vertical-align:top} 
 
.tg .tg-yw4l{vertical-align:top} 
 
@media all and (max-width: 479px) { 
 
    table, 
 
    thead, 
 
    tbody, 
 
    th, 
 
    td, 
 
    tr { 
 
    display: block \t ; 
 

 
\t 
 
\t 
 
    } 
 
</style>

<div class="tg-wrap"><table class="tg" style="width: 100%;" > 
 
<colgroup> 
 
<col style="width: 110px"> 
 
<col style="width: 108px"> 
 
<col style="width: 418px"> 
 
<col style="width: 578px"> 
 
</colgroup> 
 
    <tr> 
 
    <td class="tg-iwtr" rowspan="2">04/08/2017</th> 
 
    <td class="tg-bsv2">11:00 – 12:30</th> 
 
    <td class="tg-bsv2">data</th> 
 
    <td class="tg-yzt1">data</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-cxkv">15:00 – 17:00</td> 
 
    <td class="tg-cxkv">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr">05/08/2017</td> 
 
    <td class="tg-yzt1">11:00 – 12:30</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr" rowspan="2">06/08/2017</td> 
 
    <td class="tg-3we0">15:00 – 16:30</td> 
 
    <td class="tg-3we0">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-yzt1">16:30 – 18:00</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr" rowspan="2">07/08/2017</td> 
 
    <td class="tg-3we0">15:00 – 16:30</td> 
 
    <td class="tg-3we0">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-yzt1">16:30 – 18:00</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
</table></div>

來源

2017-07-28 tall.dragoons

的CSS看起來好像沒什麼問題。請注意，在HTML中，您將打開一個<td>，但會關閉</th>。

<style type="text/css"> 
 
.tg {border-collapse:collapse;border-spacing:0;border-color:#ffffff;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;} 
 
.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;} 
 
.tg .tg-yzt1{background-color:#efefef;vertical-align:top} 
 
.tg .tg-cxkv{background-color:#ffffff} 
 
.tg .tg-bsv2{background-color:#efefef} 
 
.tg .tg-3we0{background-color:#ffffff;vertical-align:top} 
 
.tg .tg-yw4l{vertical-align:top} 
 
@media all and (max-width: 479px) { 
 
    table, 
 
    thead, 
 
    tbody, 
 
    th, 
 
    td, 
 
    tr { 
 
    display: block \t ; 
 

 
\t 
 
\t 
 
    } 
 
</style>

<div class="tg-wrap"><table class="tg" style="width: 100%;" > 
 
<colgroup> 
 
<col style="width: 110px"> 
 
<col style="width: 108px"> 
 
<col style="width: 418px"> 
 
<col style="width: 578px"> 
 
</colgroup> 
 
    <tr> 
 
    <th class="tg-iwtr" rowspan="2">04/08/2017</th> 
 
    <th class="tg-bsv2">11:00 – 12:30</th> 
 
    <th class="tg-bsv2">data</th> 
 
    <th class="tg-yzt1">data</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-cxkv">15:00 – 17:00</td> 
 
    <td class="tg-cxkv">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr">05/08/2017</td> 
 
    <td class="tg-yzt1">11:00 – 12:30</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr" rowspan="2">06/08/2017</td> 
 
    <td class="tg-3we0">15:00 – 16:30</td> 
 
    <td class="tg-3we0">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-yzt1">16:30 – 18:00</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-iwtr" rowspan="2">07/08/2017</td> 
 
    <td class="tg-3we0">15:00 – 16:30</td> 
 
    <td class="tg-3we0">data</td> 
 
    <td class="tg-3we0">data</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-yzt1">16:30 – 18:00</td> 
 
    <td class="tg-yzt1">data</td> 
 
    <td class="tg-yzt1">data</td> 
 
    </tr> 
 
</table></div>

來源

2017-07-28 13:40:23 Lars

但我的問題一直沒有得到解決在移動視圖中顯示當表是不是在一列。該表仍然沒有響應，這看起來與桌面版本完全一樣。任何我錯過的代碼？ –

你是如何查看結果輸出的，來自stackoverflow的代碼段iframe有時不能很好地處理CSS媒體查詢。如果你嘗試這個[小提琴]（https://jsfiddle.net/az9g6zLe/），它應該在調整輸出框的大小時最有效 – Lars

如何使我的表在行動視圖中按行摺疊

回答

相關問題