带有边框折叠的 CSS 中的表格边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4096390/
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
Table border color in CSS with border collapse
提问by Sjoerd
I want to put a line above some field in a table, to indicate that it is a sum of the above values. However, the table already has borders by default.
我想在表格中的某个字段上方放置一行，以表明它是上述值的总和。但是，默认情况下，表格已经有边框。
Here is an example: I have a table with borders collapsed. I set the border-bottom on one field, and the border-top on the field below it. Both of these specify the same border. The CSS for the top one is used. Is there a way to use the bottom one?
这是一个例子：我有一个边框折叠的表格。我在一个字段上设置了border-bottom，在它下面的字段上设置了border-top。这两个都指定了相同的边界。使用顶部的 CSS。有没有办法使用底部的？
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td.first { border-bottom: solid red 1px; }
td.second { border-top: solid gold 1px; }
</style>
<body>
<table>
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
</table>
</body>
</html>
This shows two cells with a red line between them. Is there way to get a gold line?
这显示了两个单元格，它们之间有一条红线。有没有办法获得金线？
回答by nonopolarity
This is a defined behavior of border-collapse. Page 357 of the O'Reilly CSS Definitive Guide 3rd Edition says:
这是 的定义行为border-collapse。O'Reilly CSS 权威指南第 3 版的第 357 页说：
if collapsing borders have the same style and width, but differ in color, then ... from most to least preferred: cell, row, row group, column, column group, table.
if ... come from same type of element, such as two rows... then color is taken from borders that are the topmost and the leftmost.
如果折叠边框具有相同的样式和宽度，但颜色不同，则 ... 从最喜欢到最不喜欢：单元格、行、行组、列、列组、表格。
如果...来自相同类型的元素，例如两行...那么颜色取自最顶部和最左侧的边框。
So the topmost, which is red, wins out.
因此，最上面的红色获胜。
One way to override this may be to use cell for the color to win over the color for the row.
覆盖它的一种方法可能是使用单元格的颜色来赢得行的颜色。
example: http://jsfiddle.net/Chapm/
示例：http: //jsfiddle.net/Chapm/
The rules that have higher precedence than this "same color rule is"
比这个“同色规则”具有更高优先级的规则
wider border wins over narrower ones
较宽的边界胜过较窄的边界
and after that,
在那之后，
double wins over solid, then dashed, dotted, ridge, outset, groove, inset
双胜于实心，然后是虚线、虚线、脊、起点、凹槽、插图
You can use 2px for the gold for it to win over, and I tried in Chrome to use 1pxbut double, and it appears as 1px solidand it will win over the red as well. Although if you want to use this method, then it may be best to make sure the browsers you support behave the same using this technique.
你可以使用 2px 作为金色来赢得它，我尝试在 Chrome 中使用1px但是double，它看起来就像1px solid它也会赢得红色。尽管如果您想使用此方法，那么最好确保您支持的浏览器使用此技术表现相同。
回答by Dalius I
Just change border-collapse to separate and set border-spacing to zero.
只需将边框折叠更改为分隔并将边框间距设置为零即可。
Note: IE8 supports the border-spacing property only if a !DOCTYPE is specified.
注意：IE8 仅在指定了 !DOCTYPE 时才支持边框间距属性。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse: separate;
border-spacing: 0px;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first">Hello</td>
</tr>
<tr>
<td class="second">World</td>
</tr>
</table>
</body>
</html>Tested on win7 with:Chrome 16, IE 9, FF 9, Safari 5.0.5.
在 win7 上测试：Chrome 16、IE 9、FF 9、Safari 5.0.5。
回答by Chinmayee G
Remove border-collapse: collapse;from your code, instead set cellspacingattribute to 0 for your table.
border-collapse: collapse;从您的代码中删除，而是将cellspacing您的表的属性设置为 0。
回答by Kyle
Just remove the td.first { border-bottom: solid red 1px; }from your style.
只需td.first { border-bottom: solid red 1px; }从您的样式中删除。
Or change redto goldin the td.firstselector.
或者在选择器中更改red为。goldtd.first
