Three table side by side overflow of div container - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

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

Description

Three table side by side overflow of div container

Demo Code

ResultView the demo in separate window 

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

#main {
   margin:11px 11px 16px 11px;
   background-color:yellow;
}

table, td {
   border:2px solid blue;
}

.tb {
   float:left;
   margin-right:11px;
}

.clearfix:after {
   content:".";
   display:block;
   clear:both;
   visibility:hidden;
   line-height:0;
   height:0;
}

html[xmlns] .clearfix {
   display:block;
}

* html .clearfix {
   height:2%;
}
</style> 
 </head> 
 <body> 
  <div id="main" class="clearfix"> 
   <table id="tbSA" class="tb"> 
    <tbody> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
    </tbody> 
   </table> 
   <table id="tbShops" class="tb"> 
    <tbody> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
    </tbody> 
   </table> 
   <table> 
    <tbody> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
     <tr> 
      <td>Lore</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials