Split Table Row(s) for smaller screens

Question

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

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

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

You mean column will be a look like row in mobile device..? – Shailesh Oct 30 '15 at 06:22 — Shailesh, Oct 30 '15 at 06:22

Tienou · Accepted Answer · 2015-10-30T06:47:04.137

2

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>

edited Oct 30 '15 at 06:47

answered Oct 30 '15 at 06:40

Tienou

700
6
17

Thanks, the example used worked as expected in FF and Chrome, is there something that can still support IE9 as well? – League Oct 30 '15 at 09:24
Check out this post: http://stackoverflow.com/questions/24371408/flexbox-alternative-for-ie9 – Tienou Oct 30 '15 at 09:53

mpalencia · Answer 2 · 2015-10-30T10:16:22.173

you can try CSS media query, example (adjust your own width)

@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%;}
}

more examples here

Split Table Row(s) for smaller screens

2 Answers2

Linked