使用边框折叠时将边框应用于单个表格单元格

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>

Answer 2

使用边框折叠无法实现。你可以稍微解决这个问题，例如通过这样做：

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

然后应用这样的风格：

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

将会发生什么（希望）td内的div将向外扩展2个像素，并用红色边框覆盖黑色边框。

Answer 3

使用伪元素：

您可以使用伪元素来实现此目的。

将伪元素 relative 绝对定位到父td元素。使伪元素填充父元素的整个维度，然后向其添加边框。

Example Here

＆＃13;

＆＃13;

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    border: 1px solid #000;
    padding: 2px;
}
table td.selected:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    border: 2px solid red;
}

＆＃13;

<table>
    <tr>
        <td>One</td>
        <td>One</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Two</td>
        <td class="selected">Two</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Three</td>
        <td>Three</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

border-collapse意味着td实际上没有一些边界。你必须找到其他方法来做到这一点。给桌子一个背景并带走所有边界，但留下td边距给出了一个很好的边界。我相信，设置边框会给出内部边框。那会有用吗？