Split table (s) for small screens

Question

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

When I browse on a mobile device, I would like to make columns 3,4,5 to display, as if it were on the next line.

Is there any way CSS can break the string so that it looks like this, but keep the HTML source code?

Answer 1

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

Run codeHide result

Answer 2

you can try CSS media query for 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%;}
}

examples here