css：在移动视图中将列显示为行

Question

当有人在移动设备中打开页面（小于 480 像素）时，我想将表格列显示为行。

这是我的表结构。

table, th, td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

@media(max-width: 480px) {
  .main td {
    display: table-row;
  }
}

<p>
In desktop View
</p>
<table class="main">
<tr>
  <td>R1 Col 1</td>
  <td>R1 Col 2</td>
</tr>
<tr>
  <td>R2 Col 1</td>
  <td>R2 Col 2</td>
</tr>

<tr>
  <td>R3 Col 1</td>
  <td>R3 Col 2</td>
</tr>
</table>

我尝试过使用 css 之类的。

@media(max-width: 480px) {
  .main td {
    display: table-row;
  }
}

但它不起作用。在移动视图中，我想要这样的输出，第二列应显示在第一列下方。

注意：我无法将表格更改为 div。

这是我的预期输出：

Answer 1

您需要通过重置显示来破坏表格布局。

grid 或 flex 可以让你重新排列你的元素

例子

table,
th,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

@media(max-width: 480px) {
  .main tbody {
    display: grid; 
  }
  .main tr {
    display: contents;
    border:solid red
  }
  .main td {
    display: block;
  }
  .main tr td + td {
    order: 1;
  }
}

<p>
  In desktop View
</p>
<table class="main">
  <tr>
    <td>R1 Col 1</td>
    <td>R1 Col 2</td>
  </tr>
  <tr>
    <td>R2 Col 1</td>
    <td>R2 Col 2</td>
  </tr>

  <tr>
    <td>R3 Col 1</td>
    <td>R3 Col 2</td>
  </tr>
</table>

解释：

浏览器将生成一个tbody 包装器，您可以从一个以上重置显示并保持<table>元素上的表格显示行为，使其不断缩小。让我们将 tbody 设为网格（display:grid 的默认值是绘制单列）。

tr 妨碍了，display:contents 将虚拟删除它们，因此单元格 (td) 可以是 （实际上） tbody 的直接子级，并通过 . .order.您可以在这里通过tr >:nth-child(x){order:X;} 给每个单元格下订单。

资源：

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/display

显示contents

这些元素本身不会产生特定的框。它们被它们的伪盒子和它们的子盒子所取代。请注意，CSS Display Level 3 规范定义了内容值应如何影响“不寻常的元素”——不是纯粹由 CSS 框概念呈现的元素，例如替换元素。

Answer 2

如果不能改变表结构，那么很难达到预期的效果。但是如果它是固定的行和列，那么你可以使用一些 CSS 技巧来带来结果。

可以缩小浏览器宽度，看下面的sn-p。

 @media(max-width: 480px) {
   .main td{
     margin-top:63px
   }
   .main td:last-child {    
     position:absolute;
     left:8px;    
   }
}

table, th, td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

@media(max-width: 480px) {
  .main td{
    margin-top:63px
  }
  .main td:last-child {    
    position:absolute;
    left:8px;    
  }
}

<p>
In desktop View
</p>
<table class="main">
  <tr>
    <td>R1 Col 1</td>
    <td>R1 Col 2</td>
  </tr>
  <tr>
    <td>R2 Col 1</td>
    <td>R2 Col 2</td>
  </tr>

  <tr>
    <td>R3 Col 1</td>
    <td>R3 Col 2</td>
  </tr>
</table>

JS FIDDLE DEMO

Answer 3

将显示块添加到 td 和 tr 将迫使它们表现得像块级元素，试试它是否适合你

table, th, td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

@media(max-width: 480px) {
  .main tr, .main td {
    display: block;
  }
}

<table class="main">
<tr>
  <td>R1 Col 1</td>
  <td>R1 Col 2</td>
</tr>
<tr>
  <td>R2 Col 1</td>
  <td>R2 Col 2</td>
</tr>

<tr>
  <td>R3 Col 1</td>
  <td>R3 Col 2</td>
</tr>
</table>