响应式表固定第一列将列折叠成行答案

【问题标题】：Responsive Table Fixed First Column Collapsed Columns into Rows响应式表固定第一列将列折叠成行
【发布时间】：2018-01-24 22:17:11
【问题描述】：

我有一个布局如下的表格：

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

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

这是我想要的输出：

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

这可以通过媒体查询和 CSS 实现吗？还是我需要开始编写 JavaScript？

编辑：

问题描述得不够清楚：表格不只是两行，表格有多行，其中A行是Headers，例如：

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

谢谢

【问题讨论】：

您是否查看过 flexbox 选项并相应地嵌套单元格？ css-tricks.com/snippets/css/a-guide-to-flexbox
@SebCooper 谢谢，这看起来是个不错的选择，我真的厌倦了和桌子打架，或者让所有东西都像桌子一样“行动”然后用 css 打架
是的，表格最适合表格数据，但响应式演示可能不够灵活。使用 display: table 相关的 CSS 可能也值得一看。您是使用表格来进行布局还是出于语义原因？ colintoh.com/blog/display-table-anti-hero

标签： jquery css twitter-bootstrap-3 media-queries

【解决方案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>

【讨论】：