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

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

我不久前在网站上阅读的另一篇文章优雅地解决了这个问题，但我找不到它。无论如何，方法是制作边框样式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

Using pseudo elements:

You can use a pseudo element to achieve this.

Just absolutely position the pseudo element relative to the parent td element. Make the pseudo element fill the entire dimensions of the parent element, and then add the border to it.

Example Here

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;
}

<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>

Answer 4

border-collapse 意味着 td 实际上没有一些边界。你必须找到其他方法来做到这一点。给表格一个背景并去掉所有边框但留下 td 边距会给出一个漂亮的边框。我相信，然后设置边界会给出内部边界。那行得通吗？