Remove horizontal gap between floating divs with tables inside - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Table

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

Description

Remove horizontal gap between floating divs with tables inside

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">
div.column {<!--from w  w  w  . j av a2  s  .co m-->
   float:left;
}

div.column:nth-child(even) {
   
}
td {
   background-color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div> 
   <div class="column"> 
    <table width="328" height="450" border="0" cellpadding="0" cellspacing="2"> 
     <tbody> 
      <tr> 
       <td colspan="3" height="41">&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3">Lorem ipsum dol</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3">Lorem ipsum d</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3">Lorem ipsum dol</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3" height="8">Lorem </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="column"> 
    <table width="226" height="450" border="0" cellpadding="0" cellspacing="2"> 
     <tbody> 
      <tr> 
       <td height="41">&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td height="8">Lorem </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="column"> 
    <table width="163" height="450" border="0" cellpadding="0" cellspacing="2"> 
     <tbody> 
      <tr> 
       <td height="41">&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsum dolor </td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td>Lorem ipsu</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td height="8">Lorem </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="column"> 
    <table width="263" height="450" border="0" cellpadding="0" cellspacing="2"> 
     <tbody> 
      <tr> 
       <td height="41">&nbsp;</td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td height="8">Lorem </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials