是否有任何方法可以更改 仅使用CSS在移动设备上的行跨行为？

Question

我在桌面浏览器上的表格如下：

在移动设备上，我希望它看起来像这样：

例如，这样的布局对于购物车页面超级有用，例如，产品缩略图显示在其数据的左侧，数据可以在桌面上变宽（或以列显示），并且数据垂直堆叠在手机上。

如果我将移动布局写为传统表格，则我将在第一个

中使用rowspan =“ 3”以及其他3个。显然，我宁愿不必编写两个不同的表并在台式机与移动设备上显示一个或另一个。

但是，使用今天的flexboxes和css网格，我应该能够通过一组div和台式机与移动设备上的不同行为来完成此操作。

建议？

我在台式机浏览器上的表格如下：在移动设备上，我希望它看起来像这样：这种布局对于购物车页面（例如，产品在哪里...）非常有用。

< [

首先，我建议您检查此材料：

Grid cheatsheet
1. Flexbox cheatsheet

现在开始回答您的问题。这是解决方案（快速而肮脏的）外观的一些示例：

tr{
  display: grid;
  /* Define grid template */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

td{
  /* Define all cels */
  grid-column-start: 2;
  border: 1px solid black;
}

td:first-child{
  /* Define only first cell */
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}

@media screen and (min-width:900px) {
  tr{
    /* Get back to normal table style */
    display: table;
  }
}

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

从@Heretic Monkey发表评论后，更新答案。如果多数民众赞成在一个布局，而不是一个表，那么更好的是使用divs，比您的布局CSS看起来像这样：
 
.grid {
  background-color: gray;
  display: grid;
  /* Define grid template */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

.column {
  /* Define all cels */
  grid-column-start: 2;
  border: 1px solid black;
}

.thumbnail {
  /* Define only first cell */
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}

@media screen and (min-width:900px) {
  .column {
    /* Get back to normal table style */
    display: table;
  }
}
<div class="grid">
  <div class="thumbnail column">
    <img src="https://placeimg.com/200/200/animals">
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
  <div class="column">
    Column 4
  </div>
</div>

Answer 1

首先，我建议您检查此材料：

Grid cheatsheet
1. Flexbox cheatsheet

现在开始回答您的问题。这是解决方案（快速而肮脏的）外观的一些示例：

tr{
  display: grid;
  /* Define grid template */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

td{
  /* Define all cels */
  grid-column-start: 2;
  border: 1px solid black;
}

td:first-child{
  /* Define only first cell */
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}

@media screen and (min-width:900px) {
  tr{
    /* Get back to normal table style */
    display: table;
  }
}

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

从@Heretic Monkey发表评论后，更新答案。如果多数民众赞成在一个布局，而不是一个表，那么更好的是使用divs，比您的布局CSS看起来像这样：
 
.grid {
  background-color: gray;
  display: grid;
  /* Define grid template */
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
}

.column {
  /* Define all cels */
  grid-column-start: 2;
  border: 1px solid black;
}

.thumbnail {
  /* Define only first cell */
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}

@media screen and (min-width:900px) {
  .column {
    /* Get back to normal table style */
    display: table;
  }
}
<div class="grid">
  <div class="thumbnail column">
    <img src="https://placeimg.com/200/200/animals">
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
  <div class="column">
    Column 4
  </div>
</div>