Table within <td> getting squashed by 2px each side - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

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

Description

Table within <td> getting squashed by 2px each side

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">
table<!--from w  w w.  j  a va2  s  .c o m-->
 {
   border-collapse:collapse;
}
</style> 
 </head> 
 <body> 
  <table id="first" style="width:310px;border:2px;margin-top:10px;margin-left:auto;margin-right:auto;background:#F7F7F7;"> 
   <tbody> 
    <tr> 
     <td style="height:50px;width:100%;"></td> 
    </tr> 
    <tr> 
     <td> 
      <table style="width:100%;"> 
       <tbody> 
        <tr> 
         <td id="_1" style="background:#FF70C6;width:151px;height:20px;cursor:pointer;">Lorem ips</td> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
        </tr> 
        <tr> 
         <td id="_2" style="background:#0099FF;width:151px;height:20px;cursor:pointer;">Lorem i</td> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
        </tr> 
        <tr> 
         <td id="_3" style="background:#00D07B;width:151px;height:20px;cursor:pointer;">Lorem i</td> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
        </tr> 
        <tr> 
         <td id="_4" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
        </tr> 
        <tr> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
         <td id="_5" style="background:#FF5053;width:151px;height:20px;cursor:pointer;">Lorem ip</td> 
        </tr> 
       </tbody> 
      </table> </td> 
    </tr> 
    <tr> 
     <td id="ad" style="background:url('R/ad.png');width:100%;height:113px;cursor:pointer;"></td> 
    </tr> 
    <tr> 
     <td style="height:20px;width:100%;text-align:right;">Lore</td> 
    </tr> 
   </tbody> 
  </table> 
  <script type="text/javascript">

      </script>  
 </body>
</html>

Related Tutorials