css - 使用 border-collapse 时将边框应用于单个表格单元格

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> 的所有四个边是红色的。我怎样才能做到这一点？ A test case can be found here.

Answer 1

我前段时间在网站上看到另一个帖子很好地解决了这个问题，但我找不到了。无论如何，方法是制作边框样式的 double 而不是 solid。这是可行的，因为 double 比 solid 具有更高的优先级。在 1px 或 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>