使用CSS使表格的外边框颜色不同于单元格的边框颜色
使用CSS使表格的外边框颜色不同于单元格的边框颜色
提问于 2011-05-04 05:29:27
我想使用CSS来设置表格外部边框的颜色...那么内部的单元格就会有不同的边框颜色。
我创建了类似这样的东西：
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}问题是，表的颜色发生了变化，并且变成了红色，就像您在这里看到的：http://jsfiddle.net/JaF5h/
如果表格的边框宽度增加到2px，它将起作用：http://jsfiddle.net/rYCrp/
我处理CSS和跨浏览器的问题已经很久了……这是我第一次面对这样的事情，我完全被卡住了…不知道该怎么做！
有没有人知道如何用border-width:1px来解决这个问题？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-05-04 05:59:56
我会通过使用相邻的选择器来实现，如下所示：
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}这有点重复，但它通过分别设置第一行和第一列的上边框和左边框，然后用红色覆盖“内部”行和单元格，从而获得您想要的效果。
当然，这在IE6中是行不通的，因为它不理解相邻的选择器。
http://jsfiddle.net/JaF5h/36/
Stack Overflow用户
发布于 2011-05-04 05:51:59
试试这个：
tbody { display:block; margin: -1px; }Stack Overflow用户
发布于 2015-08-22 01:12:17
之前的答案对我来说并没有完全解决这个问题。可接受的答案是允许内部边框与外部表格边框重叠。经过一些实验后，我想出了以下解决方案。
通过设置表格折叠样式来分隔内部边框，使其不与外部边框重叠。从那里消除了额外的和双倍的边界。
HTML：
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td{
border-top: 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5875931
复制相关文章
相似问题
腾讯云开发者
