title: Applying borders to a single table cell when using border-collapse
body: <p>I have a table with the following CSS rules applied:</p>
  
  <pre><code>table { border-collapse: collapse; }
  td { border: 2px solid Gray; }
  </code></pre>
  
  <p>I want certain cells to have a red border, instead. </p>
  
  <pre><code>td.special { border: 2px solid Red; }
  </code></pre>
  
  <p>This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/8Wb3u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Wb3u.jpg" alt="IE8/FF3 rendering"></a><br>
  <sub>(source: <a href="http://control-v.net/stackoverflow/1241757/ie8ff3.jpg" rel="nofollow noreferrer">control-v.net</a>)</sub>  </p>
  
  <p>In IE7 Compatibility mode (Running in IE8) it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/xqlKX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqlKX.jpg" alt="IE7 Compatibility mode rendering"></a><br>
  <sub>(source: <a href="http://control-v.net/stackoverflow/1241757/ie7.jpg" rel="nofollow noreferrer">control-v.net</a>)</sub>  </p>
  
  <p>I want all four sides of the <code>&lt;td&gt;</code> to be red. How can I do this? <a href="http://control-v.net/stackoverflow/1241757/testcase.htm" rel="nofollow noreferrer">A test case can be found here.</a></p>