title: Change border of a single table cell element with border collapse
body: <p>I want to make a table with several cells. The cells must have exactly an 1px border between them. This is why I'm using border-collapse: collapse.</p>
  
  <p>When I :hover on a td element, I want it's (4 side) border to change it's color to red, but this the effects are not always visible.</p>
  
  <p>Here is a demo of the problem, it should explain a lot:</p>
  
  <p><a href="http://jsfiddle.net/4444a/" rel="nofollow">http://jsfiddle.net/4444a/</a></p>
  
  <p>I tried to mix position and z-index, but they did not work out well.</p>
  
  <p>Is there any pure CSS way to do it efficiently?</p>
  
  <p>"Links to jsfiddle.net must be accompanied by code" - HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;4&lt;/td&gt;
          &lt;td&gt;5&lt;/td&gt;
          &lt;td&gt;6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;7&lt;/td&gt;
          &lt;td&gt;8&lt;/td&gt;
          &lt;td&gt;9&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table {
      margin: 20px;
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  td {
      width: 40px;
      height: 40px;
      border: 1px solid black;
      text-align: center;
  }
  
  td:hover {
      border: 1px solid red;
  }
  </code></pre>