break table using media query - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Layout

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Layout

Description

break table using media query

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsu</title> 
  <style>
table {<!--  ww  w . j a v  a  2  s. c  o  m-->
   counter-reset:tds;
   counter-increment:tds -2;
   width:100%;
   text-align:center;
}

td {
   border:solid 2px;
}

td:before {
   counter-increment:tds;
   content:'TD 'counter(tds);
}

@media screen and (max-width: 600px)  {
   * {
      box-sizing:border-box;
   }
   
   tr {
      display:flex;
      flex-wrap:wrap;
      width:100%;
   }
   
   td {
      display:block;
      width:51%;
      text-align:center;
   }
   
   td[colspan] {
      width:100%;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <table> 
   <tbody> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td colspan="2"> </td> 
     <td colspan="2"> </td> 
    </tr> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
    </tr> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
    </tr> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td colspan="2"> </td> 
     <td colspan="2"> </td> 
    </tr> 
    <tr> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
     <td> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials