使用边界崩溃时应用边框到一个表格单元格

Question

我有一个表应用了下面的CSS规则：

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

我希望某些细胞具有红色边框，而不是。

td.special { border: 2px solid Red; }

这不工作，我会期望。在FireFox 3和IE8它看起来像这样：

结果 <子>（来源： control-v.net ）

在IE7兼容模式（运行中IE8）它看起来像这样：

结果 <子>（来源： control-v.net ）

我想<td>的所有四个侧面是红色的。我怎样才能做到这一点？ 的测试情况下，可以在这里找到。

Answer 1

使用边界崩溃

将是不可能的。你可以解决这个问题有点虽然，例如，通过这样做：

<td class="special"><div>Two</div></td>

然后将样式是这样的：

.special div {
    border: 2px solid #f00;
    margin: -2px;
}

什么（希望）会发生是TD内的DIV将2个像素向外膨胀并与红色边框覆盖的黑色边界。

Answer 2

还有我刚才读的网站，优雅的解决了这一问题上的其他职位，但我找不到它。总之，办法是使边框样式double代替solid。这工作，因为双比固体更高的优先级。上1个像素或2px的边界，双线之间的间隙不会出现，因为线重叠。

table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }

<table>
    <tr><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td class="special">a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td></tr>
</table>