拆分表行以用于较小的屏幕

本文介绍了拆分表行以用于较小的屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一张固定宽度为960px的表格，其中有5列.

I have a table with fixed width of 960px with 5 columns.

当我在移动设备上查看时，我希望将第3、4、5列看起来就像在下一行一样.

When I view in a mobile device, I'd like to make columns 3,4,5to appear as if it is on the next row.

CSS是否可以以某种方式中断行，所以看起来像这样，但是仍然保留原始的HTML代码?

Is there any way the CSS can break a row so it looks this, butstill keep the original HTML code?

推荐答案

您可以使用FlexBox:

You could use 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>

这篇关于拆分表行以用于较小的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！