为较小的屏幕拆分表行答案

【问题标题】：Split Table Row(s) for smaller screens为较小的屏幕拆分表行
【发布时间】：2015-10-30 06:19:02
【问题描述】：

我有一个固定宽度为 960 像素、有 5 列的表格。

当我在移动设备中查看时，我想制作第 3、4、5 列看起来好像它在下一行。

有什么办法可以让 CSS 打破一行，让它看起来像这样，但是还保留原来的 HTML 代码吗？

【问题讨论】：

你的意思是列在移动设备中看起来像行..？

标签： jquery html css mobile

【解决方案1】：

你可以使用 FlexBox：

.flexParent{
  display: flex;
}

.flexChild{
  width: 20%;
}

@media only screen and (max-width: 767px) {
   .flexParent{
      flex-wrap: wrap; 
   }
   .flexChild{
     width: 50%;
   }
   .wrap{
     width: 30%;
   }
}

<div class="flexParent">
  <div class="flexChild">1</div>
  <div class="flexChild">2</div>
  <div class="flexChild wrap">3</div>
  <div class="flexChild wrap">4</div>
  <div class="flexChild wrap">5</div>
</div>

【讨论】：

谢谢，使用的示例在 FF 和 Chrome 中按预期工作，还有什么东西可以支持 IE9 吗？
查看这篇文章：stackoverflow.com/questions/24371408/…

【解决方案2】：

你可以试试 CSS 媒体查询，例子（调整你自己的宽度）

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 20%;}
    .col-2 {width: 20%;}
    .col-3 {width: 20%;}
    .col-4 {width: 20%;}
    .col-5 {width: 20%;}
}

@media only screen and (max-width: 767px) {
    /* For mobile: */
    .col-1 {width: 50%;}
    .col-2 {width: 50%;}
    .col-3 {width: 30%;}
    .col-4 {width: 30%;}
    .col-5 {width: 30%;}
}

更多示例 here

【讨论】：