title: Remove border from table cell
body: <p>I have a table structure which is dynamically generated. There is a tricky styling to the table table.</p>
  
  <p>I have added border top and right to the direct table, what I need is to remove/manipulate with border color for first and last <code>td</code> of the <code>table</code>.</p>
  
  <p>If you can see my fiddle, I need to wrap the orange colored table with outline of grey color. At the same time the border of 1px to the <code>td</code> should remain the same.</p>
  
  <p>If I try giving the border top to the cell then white border is collapsing. </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.table_main {
      border-top: 3px solid #d6d6d6 !important; 
      border-right: 3px solid #d6d6d6 !important; 
  }
  
  .table_main td {
      background: #ff9d26;
      border-right: solid 1px #fff;
      border-bottom: 1px solid #fff;
      padding: 1px;
      text-align: center;
      width: 100px
  }
  
  .left {
      background: #fff !important;
      border-right: 3px solid #d6d6d6 !important; 
      border-bottom: 0 !important
  }
  
  .noborder {
      background: #fff !important;
  }
  
  .bottom{
      background: #fff !important;
      border-top: 3px solid #d6d6d6 !important; 
  }
  
  .top{
      border-top: 1px solid #fff  
  }
  </code></pre>
  
  <p>Please check the <strong><a href="http://jsbin.com/IZAFAmI/2/" rel="nofollow">DEMO here</a></strong></p>
  
  <p><strong>P.S - I dont want to change the structure of the html because it is auto generated table code. And no pseudo classes since it is not supported in IE8 and below. I need this to be proper in IE7+</strong></p>