Making table content responsive to screen size - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Responsive

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

Description

Making table content responsive to screen size

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style>
* {<!--  w  w w.j av  a2  s  .  c o  m-->
   margin:0;
   box-sizing:border-box;
}

html, body {
   height:100%;
}

body {
   font:100%/2.4 sans-serif;
   color:Chartreuse;
   overflow-y:scroll;
}

.hide-xs {
   position:absolute;
   visibility:hidden;
}

.table img {
   width:100%;
}

@media (min-width: 768px) {
   .show-xs {
      position:absolute;
      visibility:hidden;
   }
   
   .hide-xs {
      position:initial;
      visibility:visible;
   }
   
   .table {
      display:table;
      width:100%;
      table-layout:fixed;
      border-collapse:collapse;
   }
   
   .table .row {
      display:table-row;
   }
   
   .table .row>div {
      display:table-cell;
      vertical-align:middle;
   }

}

@media (min-width: 992px)  {
   

}

@media (min-width: 1200px)  {
   

}
</style> 
 </head> 
 <body> 
  <div class="table"> 
   <div class="row hide-xs"> 
    <div>
      Lorem i 
    </div> 
    <div>
      Lorem i 
    </div> 
    <div>
      Lorem ip 
    </div> 
    <div>
      Lorem 
    </div> 
    <div>
      Lorem i 
    </div> 
   </div> 
   <!-- ROW --> 
   <div class="row"> 
    <!-- CELLS --> 
    <div> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
    <div> 
     <span class="show-xs">Lorem i</span>Lorem ipsu 
    </div> 
    <div> 
     <span class="show-xs">Lorem</span>Lorem i 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
   </div> 
   <div class="row"> 
    <div> 
     <img src="https://www.java2s.com/style/demo/Opera.png"> 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
    <div> 
     <span class="show-xs">Lorem i</span>Lorem ipsu 
    </div> 
    <div> 
     <span class="show-xs">Lorem</span>Lorem i 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
   </div> 
   <div class="row"> 
    <div> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
    <div> 
     <span class="show-xs">Lorem i</span>Lorem ipsu 
    </div> 
    <div> 
     <span class="show-xs">Lorem</span>Lorem ip 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
   </div> 
   <div class="row"> 
    <div> 
     <img src="https://www.java2s.com/style/demo/Opera.png"> 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
    <div> 
     <span class="show-xs">Lorem i</span>Lorem ipsu 
    </div> 
    <div> 
     <span class="show-xs">Lorem</span>Lorem ip 
    </div> 
    <div> 
     <span class="show-xs">Lorem </span>Lorem 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials