Nested tables: 1px border with css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Border

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

Description

Nested tables: 1px border with css

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style type="text/css">
table.outer<!--from ww  w . ja v  a 2 s. c om-->
 {
   border:2px solid Chartreuse;
   border-collapse:collapse;
   width:100%;
}

table.outer td
 {
   border:2px solid yellow;
   border-collapse:collapse;
}

table.nested, table.nested td
 {
   border-width:0px;
   border-collapse:collapse;
   width:100%;
}
</style> 
 </head> 
 <body> 
  <table class="outer"> 
   <tbody> 
    <tr> 
     <td> 
      <table class="nested"> 
       <tbody> 
        <tr> 
         <td> &nbsp; </td> 
         <td> &nbsp; </td> 
        </tr> 
        <tr> 
         <td> &nbsp; </td> 
         <td> &nbsp; </td> 
        </tr> 
       </tbody> 
      </table> </td> 
     <td>Lorem ips</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td> 
      <table class="nested"> 
       <tbody> 
        <tr> 
         <td> &nbsp; </td> 
         <td> &nbsp; </td> 
        </tr> 
        <tr> 
         <td> &nbsp; </td> 
         <td> &nbsp; </td> 
        </tr> 
       </tbody> 
      </table> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials