我想在表格中的某个字段上方放一条线，以指示它是上述值的总和。但是，默认情况下表格已经有边框。
这是一个例子:我有一个折叠了边框的表格。我在一个字段上设置了 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>
这显示了两个单元格，它们之间有一条红线。有没有办法获得金线？
最佳答案
这是 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.
所以最上面的红色胜出。
覆盖它的一种方法可能是使用单元格的颜色来赢得行的颜色。
比这个“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 它也将战胜红色。尽管如果您想使用此方法，那么最好确保您支持的浏览器在使用此技术时表现相同。
关于css - 具有边框折叠的 CSS 中的表格边框颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4096390/