隐藏在<td>另一个<td>后面<table>

Question

我有一个表，看起来像这样。

<table>
    <tr>
        <td class="selected plus"><a>+</a></td>
        <td><a class="minus">-</a></td>
    </tr>
</table>

我希望只有选中的td是可见的。我的限制是只能通过CSS实现这一点。我不能改变HTML或注入某种JavaScript。

这是我想到的:

• 将选定的td放置在其他
上
• 展开选中的td来"置换"另一个
• 隐藏未选中的td

不幸的是，这两个想法我都没有成功，所以你们知道如何实现这一点吗?

这里是一个jsfiddle来玩:http://jsfiddle.net/u6n7r/6/

我很乐意使用跨浏览器的解决方案，但是必须支持IE9。

Answer 1

用display: none:

隐藏<td/>

td:not(.selected) { display: none; }

这是一个更新你的提琴

Answer 2

表的相对位置。设置td为绝对值，top:0和left: 0。让td的z指数为10。给.selected一个z-index为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;
}