title: Using CSS to make table's outer border color different from cells' border color
body: <p>I want to use CSS to set a color of the outer border of the table ...
  Then the inner cells would have different border color ...</p>
  
  <p>I created something like this :</p>
  
  <pre><code>table {
       border-collapse:collapse;
       border: 1px solid black; 
  }
  
  table td {
       border: 1px solid red;
  }
  </code></pre>
  
  <p>Problem is, the table's color change and become red as you can see here : <a href="http://jsfiddle.net/JaF5h/" rel="noreferrer">http://jsfiddle.net/JaF5h/</a></p>
  
  <p>If the border width of the table is increased to be 2px it will work : <a href="http://jsfiddle.net/rYCrp/" rel="noreferrer">http://jsfiddle.net/rYCrp/</a></p>
  
  <p>I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!</p>
  
  <p>Any one knows how to get that fixed with border-width:1px ?</p>