title: Css - How to override css for a table cell
body: <p>css newbie question -<br>
  we have a generalized css defined for Table along with its Table Cells as:</p>
  
  <pre><code>.table {
      width: 100%;
      margin: 1em 0 1em 0;
      border-top: 1px solid #A3C0E8;
      border-left: 1px solid #A3C0E8;    
  }
  
  .table td, .table th {
      padding: .6em;
      border-right: 1px solid #A3C0E8;
      border-bottom: 1px solid #A3C0E8;
      vertical-align: middle;
      background:#D7E8FF;
      color:#333;
  }
  </code></pre>
  
  <p>In one scenerio, I want to override td style so that I can show an icon image in front of Table Cell text.
  so, if Table Cell is defined as - <code>&lt;td&gt; Vehicle Name &amp; Details &lt;/td&gt;</code>   </p>
  
  <p>I want to apply style for this Table Cell so that it also show icon image in front of text - 'Vehicle Name &amp; Details'.</p>
  
  <p>I added this style in css file - </p>
  
  <pre><code>.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }
  </code></pre>
  
  <p>and added to td as <code>&lt;td class="vehicle"&gt; Vehicle Name &amp; Details &lt;/td&gt;</code> 
  but no icon is being shown. Parent table of this td is <code>&lt;table class="table"&gt;</code> </p>
  
  <p>Am I missing something?</p>
  
  <p>Thank you! </p>