CSS 使用边框折叠时将边框应用于单个表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1241757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying borders to a single table cell when using border-collapse
提问by Brant Bobby
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 中，它看起来像这样：
(source: control-v.net)
（来源：control-v.net）
In IE7 Compatibility mode (Running in IE8) it looks like this:
在 IE7 兼容模式下（在 IE8 中运行），它看起来像这样：
(source: control-v.net)
（来源：control-v.net）
I want all four sides of the <td>to be red. How can I do this? A test case can be found here.
我希望 的四个边<td>都是红色的。我怎样才能做到这一点？可以在此处找到测试用例。
采纳答案by Karl
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 个像素，并用红色边框覆盖黑色边框。
回答by aebabis
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 doubleinstead 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. 这是有效的，因为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>回答by Josh Crozier
Using pseudo elements:
使用伪元素：
You can use a pseudo element to achieve this.
您可以使用伪元素来实现这一点。
Just absolutely position the pseudo element relativeto the parent tdelement. Make the pseudo element fill the entire dimensions of the parent element, and then add the border to it.
只是相对于父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>回答by rpjohnst
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 边距给出了一个很好的边框。我相信，然后设置边界会产生内部边界。那行得通吗？
