CSS中的表格边框颜色与边框折叠
Posted
技术标签:
【中文标题】CSS中的表格边框颜色与边框折叠【英文标题】：Table border color in CSS with border collapse 【发布时间】：2011-05-05 00:39:57 【问题描述】：我想在表格中的某个字段上方放置一行，以表明它是上述值的总和。但是，表格默认已经有边框了。
这里是一个例子：我有一个边框折叠的表格。我将边框底部设置在一个字段上，并将边框顶部设置在它下方的字段上。这两个都指定了相同的边界。使用顶部的 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 is a page 解释了它的工作原理以及浏览器如何计算不同的边框。 我相信没有 CSS 解决方案可以解决这个问题，因为边框折叠只是做了它的作用。您可以使用一些解决方法，例如使用 javascript。您的文档中是否包含任何 javascript 库？ 我用 jQuery 解决了这个问题，使用类似这样的东西：mail-archive.com/jquery-en@googlegroups.com/msg89877.html 【参考方案1】：从您的代码中删除 border-collapse: collapse;，而是将您的表的 cellspacing 属性设置为 0。
【讨论】：
是的，但是那个显示了金色和红色边框（Firefox）【参考方案2】：只需从您的样式中删除 td.first border-bottom: solid red 1px; 。
或在td.first 选择器中将red 更改为gold。
Example here.
【讨论】：
【参考方案3】：这是border-collapse 的定义行为。 O'Reilly CSS Definitive Guide 3rd Edition 的第 357 页说：
如果折叠边框具有相同的样式和宽度，但颜色不同，则...从最喜欢到最不喜欢：单元格、行、行组、列、列组、表格。
如果...来自相同类型的元素，例如两行...然后颜色取自最顶部和最左侧的边框。
所以最上面的那个是红色的。
一种覆盖它的方法可能是使用单元格的颜色来赢得行的颜色。
示例：http://jsfiddle.net/Chapm/
比这个“同色规则是”优先级更高的规则
较宽的边界胜过较窄的边界
然后，
双赢实线，然后虚线，点线，脊线，开头，凹槽，插图
您可以使用 2px 的黄金来赢得胜利，我在 Chrome 中尝试使用 1px 但 double，它显示为 1px solid，它也会战胜红色。虽然如果您想使用此方法，那么最好确保您支持的浏览器使用此技术的行为相同。
http://jsfiddle.net/Chapm/2/
【讨论】：
这确实解决了我的问题。但是，它在 IE7 中不起作用。 我更新了更多规则...是的，这是非常具体的，在所有类型的浏览器中可能并不相同。 非常感谢！我为此苦苦挣扎，不知道发生了什么。double 技巧效果很好。我正在使用它在悬停时显示 TR 周围的边框。
尽管它已有近四年的历史，但这是一个花花公子的答案。
也许这条规则在完美世界或 Chrome 中有效，但不同的浏览器有不同的优先级规则。在我看来，这真的很可悲。【参考方案4】：
只需将border-collapse 改为separate 并将border-spacing 设置为零即可。
注意：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>在 win7 上测试： 铬 16， 即 9, 法郎 9, Safari 5.0.5。
【讨论】：
OPs 的问题有点奇怪。不确定他是否想要两个边界。我来到这里是因为我想要一张在每个<tr> 的顶部和底部都有边框的表格，但是边框正在折叠。我尝试了border-collapse: separate，在单元格周围有一些边距，我无法用 CSS 摆脱。这是我失踪的border-spacing: 0。谢谢你的回答。【参考方案5】：
我知道这是一个老问题，但刚刚遇到这个问题，我就这样解决了
table
border-collapse: collapse;
td.first
border-bottom: solid red 1px;
td.second
border-top: solid gold 1px;
position: relative;
tr:not(:first-child) td.second::before
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: gold;
<table >
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
<tr><td class="second">World</td></tr>
</table>【讨论】：
以上是关于CSS中的表格边框颜色与边框折叠的主要内容，如果未能解决你的问题，请参考以下文章