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

只需使用<td/>隐藏display: none：

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

这是Update to your Fiddle

Answer 2

将表格相对定位。将td的绝对值定位为top：0和left：0。给td的z-index为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;
}

在<table> </table>中覆盖另一个

2 个答案: