Hide a <td> behind another <td> inside a <table> - html

Question

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

Answer 1

Just hide the <td/> with display: none:
td:not(.selected) { display: none; }
Here is an Update to your Fiddle

Answer 2

Position the table relative. Position the td's absolute, with top:0 and left: 0. Give the td's a z-index of 10. Give .selected a z-index of 11.
.selected {
background-color: green;
z-index: 11;
}
.plus {
}
.minus {
}
td {
width: 30px;
height: 30px;
border: 3px solid red;
background-color: silver;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
table {
border: 3px solid blue;
width: 72px;
height: 36px;
position: relative;
}