使用边框折叠时将边框应用于单个表格单元格 [英] Applying borders to a single table cell when using border-collapse

问题描述

我有一个表格，其中应用了以下CSS规则:

  table {border-collapse:折叠;}td {边框:2px纯灰色；} 

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

  td.special {边框:2px纯红色；} 

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

_{(来源:
(来源: control-v.net )}

我希望< td> 的所有四个侧面都为红色.我怎样才能做到这一点?可以在此处找到测试用例.

解决方案

无法使用border-collapse.不过，您可以在某种程度上解决该问题，例如，通过执行以下操作:

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

然后应用如下样式:

  .special div {边框:2px实线#f00;边距:-2px;} 

(希望)将发生td内部的div向外扩展2个像素，并用红色边框覆盖黑色边框的情况.

I have a table with the following CSS rules applied:

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:

_{(source: control-v.net)}

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

_{(source: 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.

解决方案

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.

这篇关于使用边框折叠时将边框应用于单个表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！