Padding a single cell without effecting the whole row

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table.fixed td, th {
   overflow:hidden;
}

#marg .wrap table table {
   width:100%
}

#marg table.fixed {
   table-layout:fixed;
   font-family:'Open Sans', sans-serif;
   font-size:.96em;
}

#marg table {<!--from   w w w.  ja  va2  s .  c om-->
   table-layout:auto;
   border-collapse:separate;
   border-spacing:0;
   empty-cells:show;
}

#marg td, th {
   color:Chartreuse;
   border-bottom:2px solid yellow;
   border-left:2px solid blue;
   text-align:left;
   padding:.5em .8em 2em;
   vertical-align:top;
}

th {
   background-color:pink;
   padding-bottom:16px;
   color:OrangeRed;
   font-weight:401;
   font-family:'Open Sans';
   vertical-align:middle;
}

table {
   border-top:2px solid grey;
   border-right:2px solid BlueViolet;
   background-color:Chartreuse;
   background-color:yellow;
}

.alone {
   vertical-align:bottom;
   height:71px;
}

.good {
   font-size:.86em;
   color:blue;
   background-color:pink;
   font-weight:701;
   width:71px;
   height:17px;
   padding-top:3px;
   margin-top:13px;
   text-align:center;
   font-family:Arial, 'Open Sans', sans-serif;
}

div .good {
   text-align:center;
}

table.fixed p {
   margin-top:4px;
}

.wrap {
   width:696px;
}
</style> 
 </head> 
 <body> 
  <div id="marg"> 
   <div class="wrap"> 
    <table border="1" class="fixed"> 
     <colgroup> 
      <col style="width:90px;"> 
      <col style="width:160px;"> 
      <col style="width:100px;"> 
      <col style="width:115px;"> 
      <col style="width:100px;"> 
      <col style="width:130px;"> 
     </colgroup> 
     <thead> 
      <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td> 
        <div class="alone">
          Lorem 
        </div> </td> 
       <td> 
        <div class="alone">
          Lorem 
        </div> </td> 
       <td> 
        <div class="alone">
          Lorem 
        </div> 
        <div class="good">
          Lorem 
        </div> </td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </div>  
 </body>
</html>
Padding a single cell without effecting the whole row - HTML CSS CSS Property

Description

Demo Code

Related Tutorials
