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

Question

我有一个表格,应用了以下CSS规则:

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

我希望某些单元格有红色边框.

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

这不符合我的预期.在FireFox 3和IE8中它看起来像这样:

IE8/FF3渲染http://control-v.net/stackoverflow/1241757/ie8ff3.jpg

在IE7兼容模式(在IE8中运行),它看起来像这样:

IE7兼容模式渲染http://control-v.net/stackoverflow/1241757/ie7.jpg

我希望这四个方面<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

使用伪元素:

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

只需将pseudo元素相对于父td元素进行绝对定位.使伪元素填充父元素的整个维度,然后向其添加边框.

这里的例子

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>