Style table with responsive - HTML CSS CSS Widget

Description

Style table with responsive
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!-- w ww  .j a v a2  s.  c om-->
   border-collapse:collapse;
   width:100%;
   color:Chartreuse;
}

tr:nth-of-type(2n+1) {
   background:yellow none repeat scroll 0 0;
}

th {
   background:blue none repeat scroll 0 0;
   color:pink;
   font-weight:bold;
}

td, th {
   border:2px solid OrangeRed;
   padding:7px;
   text-align:left;
   vertical-align:middle;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
   
   table, thead, tbody, th, td, tr {
   display:block;
}

thead tr {
   position:absolute;
   top:-10000px;
   left:-10000px;
}

tr {
   border:2px solid grey;
}

td {
   border:none;
   border-bottom:2px solid BlueViolet;
   position:relative;
   padding-left:51%;
}

td:before {
   position:absolute;
   top:7px;
   left:7px;
   width:46%;
   padding-right:11px;
   white-space:nowrap;
}

table td:nth-of-type(1)::before {
   content:"Year";
}

table td:nth-of-type(2)::before {
   content:"2015";
}

table td:nth-of-type(3)::before {
   content:"2016";
}

table td:nth-of-type(4)::before {
   content:"2017";
}

table td:nth-of-type(1)::after {
   float:left;
   content:"Expense:";
   padding-right:6px;
}

table tr:last-of-type td:nth-of-type(1)::after {
   content:"";
}
</style> 
 </head> 
 <body> 
  <table id="expenses"> 
   <thead> 
    <tr> 
     <th>Lorem i</th> 
     <th>Lore</th> 
     <th>Lore</th> 
     <th>Lore</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>Lorem ip</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
     <td>Lorem i</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor</td> 
     <td>Lorem </td> 
     <td>Lorem </td> 
     <td>Lorem </td> 
    </tr> 
    <tr> 
     <td> <strong>Lorem ipsum do</strong> </td> 
     <td> <strong>Lorem ip</strong> </td> 
     <td> <strong>Lorem ip</strong> </td> 
     <td> <strong>Lorem i</strong> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>
Style table with responsive - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
