Question

我有一张包含以下布局的表格：

---------------------
| A1 | A2 | A3 | A4 |
---------------------
| B1 | B2 | B3 | B4 |
---------------------

当用户调整浏览器大小时，我希望将表中的右列旋转到第二列，并使它们表现为行。而不是他们堆叠，我希望他们转动。我在网上找到了很多堆叠的例子，但实际上并不是我想要的。

这是我想要的输出：

---------------------
| A1 | A2: B2       |
| B1 | A3: B3       |
|    | A4: B4       |
---------------------

媒体查询和CSS是否可行？或者我是否需要开始编写JavaScript？

编辑：

我没有足够清楚地描述这个问题：表格不仅仅是两行，表格有多行，A行是标题，例如：

---------------------
| A1 | A2 | A3 | A4 |
---------------------
| B1 | B2 | B3 | B4 |
---------------------
| C1 | C2 | C3 | C4 |
---------------------
| D1 | D2 | D3 | D4 |
---------------------

到

---------------------
| A1 | A2: B2       |
| B1 | A3: B3       |
|    | A4: B4       |
---------------------
| A1 | A2: C2       |
| C1 | A3: C3       |
|    | A4: C4       |
---------------------
| A1 | A2: D2       |
| D1 | A3: D3       |
|    | A4: D4       |
---------------------

谢谢

Answer 1

这是一个工作的jsfiddle，演示了一个基本的flexbox实现，可以解决您的布局问题： Nested Flexbox column-row switch demo

.table {
  width: 100%;
}
.table, .column, .column2 {
  display: flex; 
}
.column, .column2 {
  flex-grow: 1;
  flex-direction: column;
}
.column .cell-l1 {
  padding: 10px;
}
.cell-l1 {
  border: 1px solid teal;
   box-sizing: border-box; /* aesthetic rule not necessary for solution*/
   background: white; 
   flex-grow: 1;
}
.column2 .cell-l1 { 
    flex-direction: row;
    display: flex;
}
.cell-l2 {
  flex-grow: 1;
  padding: 10px;
}
.cell-l2:nth-child(2n+1) {
  background-color: #DDD; /* alternating background color */
}

@media (max-width:768px){
  .column2 .cell-l1 { 
    flex-direction: column;    
   }
   .column2 {
      flex-direction: row;
    }
}

<div class="table">
  <div class="column">
    <div class="cell-l1">
      A1
    </div>
    <div class="cell-l1">
      B1
    </div>
  </div>
  <div class="column2">
    <div class="cell-l1">
      <div class="cell-l2">
        A2
      </div>
      <div class="cell-l2">
        A3
      </div>
      <div class="cell-l2">
        A4
      </div>
    </div>
    <div class="cell-l1">
      <div class="cell-l2">
        B2
      </div>
      <div class="cell-l2">
        B3
      </div>
      <div class="cell-l2">
        B4
      </div>
    </div>
  </div>
</div>

响应表将第一列折叠列固定为行

1 个答案: