title: Outline table row on hover
body: <p>I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using <code>outline</code> but it doesn't play nice with <code>:hover</code> in webkit.</p>
  
  <p><a href="http://jsfiddle.net/S9pkM/2/" rel="noreferrer">http://jsfiddle.net/S9pkM/2/</a></p>
  
  <p>Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red.</p>
  
  <pre><code>table { border-collapse: collapse; } /*I am aware of separate */
  table td { border: 3px solid black; }
  table tr:hover td { border-top-color: red; border-bottom-color: red; }
  table tr:hover td:first-child { border-left-color: red; }
  table tr:hover td:last-child  { border-right-color: red; }
  </code></pre>
  
  <p>I am open to alternate approaches, but I am stuck with the table structure. No inserting additional html besides standard <code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;</code></p>