如何让我的表格在移动视图中按行折叠

Posted 2023-03-06

【中文标题】如何让我的表格在移动视图中按行折叠

【英文标题】：How to make my table collapse by row in mobile view

【发布时间】：2018-01-04 10:15:14

【问题描述】：

我正在尝试将响应式表格添加到我网站中的 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 tdfont-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 thfont-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-iwtrbackground-color:#34cdf9;color:#ffffff;vertical-align:top;
.tg .tg-yzt1background-color:#efefef;vertical-align:top
.tg .tg-cxkvbackground-color:#ffffff
.tg .tg-bsv2background-color:#efefef
.tg .tg-3we0background-color:#ffffff;vertical-align:top
.tg .tg-yw4lvertical-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>

【参考方案1】：

Css 对我来说看起来不错。请注意，在 html 中，您打开的是 <td>，但关闭的是 </th>。

<style type="text/css">
.tg  border-collapse:collapse;border-spacing:0;border-color:#ffffff;
.tg tdfont-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 thfont-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-iwtrbackground-color:#34cdf9;color:#ffffff;vertical-align:top;
.tg .tg-yzt1background-color:#efefef;vertical-align:top
.tg .tg-cxkvbackground-color:#ffffff
.tg .tg-bsv2background-color:#efefef
.tg .tg-3we0background-color:#ffffff;vertical-align:top
.tg .tg-yw4lvertical-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>

【讨论】：

但是我的问题还没有解决，因为表格在移动视图中显示时不在一列中。该表仍然没有响应，看起来与桌面版本完全相同。我在那里错过的任何代码？

您如何查看结果输出，*** 中的 code-sn-p iframe 有时无法与 css 媒体查询配合使用。如果你试试这个fiddle，它在调整输出帧大小时肯定会起作用