title: Hide a <td> behind another <td> inside a <table>
body: <p>I have a table which looks something like the following.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="selected plus"&gt;&lt;a&gt;+&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a class="minus"&gt;-&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want that only the selected <code>td</code> is visible. My restrictions are to achieve this only through <code>CSS</code>. I am not able to alter the <code>HTML</code> or inject some kind of <code>JavaScript</code>.</p>
  
  <p>This is what I come up with yet:</p>
  
  <ul>
  <li>position the selected <code>td</code> over the other</li>
  <li>expand the selected <code>td</code> to "displace" the other</li>
  <li>hide the not selected <code>td</code></li>
  </ul>
  
  <p>Unfortunately I was not successful with neither of those ideas, so do you guys have any idea how to achieve this?</p>
  
  <p>Here is a jsfiddle to play around with: <a href="http://jsfiddle.net/u6n7r/6/" rel="nofollow">http://jsfiddle.net/u6n7r/6/</a></p>
  
  <p>I would be happy with a cross browser solution, but IE9 support is mandatory.</p>