带有边框折叠的 CSS 中的表格边框颜色 [英] Table border color in CSS with border collapse
问题描述
我想在表格中的某个字段上方放置一行，以表明它是上述值的总和.但是，表格默认已经有边框.
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.
这是一个例子:我有一个边框折叠的表格.我在一个字段上设置了border-bottom，在它下面的字段上设置了border-top.这两个都指定了相同的边界.使用顶部的 CSS.有没有办法使用底部的?
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?
<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?
推荐答案
这是border-collapse 的定义行为.O'Reilly CSS 权威指南第 3 版的第 357 页说:
This is a defined behavior of border-collapse. Page 357 of the O'Reilly CSS Definitive Guide 3rd Edition says:
如果折叠边框具有相同的样式和宽度，但颜色不同，那么...从最喜欢到最不喜欢:单元格、行、行组、列、列组、表格.
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.
优先级高于此同色规则"的规则是
The rules that have higher precedence than this "same color rule is"
较宽的边界胜过较窄的边界
wider border wins over narrower ones
在那之后，
双胜于实体，然后是虚线、虚线、脊、起点、凹槽、插图
double wins over solid, then dashed, dotted, ridge, outset, groove, inset
你可以使用 2px 的黄金来赢得它，我尝试在 Chrome 中使用 1px 但 double，它显示为 1px solid 它也将赢得红色.虽然如果您想使用这种方法，那么最好确保您支持的浏览器在使用这种技术时表现相同.
You can use 2px for the gold for it to win over, and I tried in Chrome to use 1px but double, and it appears as 1px solid and 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.
这篇关于带有边框折叠的 CSS 中的表格边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
