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

I have a table with the following CSS rules applied:

我有一个表格，应用了以下CSS规则：

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

I want certain cells to have a red border, instead.

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

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

This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:

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

IE8/FF3 rendering http://control-v.net/*/1241757/ie8ff3.jpg

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

In IE7 Compatibility mode (Running in IE8) it looks like this:

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

IE7 Compatibility mode rendering http://control-v.net/*/1241757/ie7.jpg

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

I want all four sides of the <td> to be red. How can I do this? A test case can be found here.

我希望的所有四边都是红色的。我怎样才能做到这一点？可在此处找到测试用例。

4 个解决方案

#1

Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:

使用边界崩溃是不可能的。你可以稍微解决这个问题，例如通过这样做：

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

Then applying a style like this:

然后应用这样的样式：

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

What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.

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

#2

There's another post on the site I read a while ago that gracefully solves this problem, but I couldn't find it. Anyway, the approach was to make the border-style double instead of solid. This works because double has a higher priority than solid. On 1px or 2px borders, the gap between the double lines doesn't appear because the lines overlap.

在我刚读过的网站上有另一篇文章，它优雅地解决了这个问题，但我找不到它。无论如何，方法是使边框式双重而不是实心。这是有效的，因为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>

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

只需相对于父td元素绝对定位伪元素。使伪元素填充父元素的整个维度，然后向其添加边框。

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>

#4

border-collapse means the td's don't actually have some of their borders. You'll have to find some other way to do it. Giving the table a background and taking away all borders but leaving the td margins gives a nice border. Then setting a border would give an internal border, I believe. Would that work?

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