html - 如何让我的表格在移动 View 中按行折叠

Question

我正在尝试向我网站的 iframe 添加一个响应式表格。该表在桌面上看起来不错，但在移动 View 中却不尽如人意。我已尝试使用@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	;

	
	
  }
</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>

Answer 1

我觉得 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	;

	
	
  }
</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>