使用CSS使表格外边框颜色与单元格边框颜色不同

我想使用 CSS 设置表格外边框的颜色...... 那么内部单元格会有不同的边框颜色......

我创建了这样的东西：

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

问题是，表格的颜色发生变化并变成红色，如下所示：http://jsfiddle.net/JaF5h/ http://jsfiddle.net/JaF5h/

如果表格的边框宽度增加到 2px 就可以了：http://jsfiddle.net/rYCrp/ http://jsfiddle.net/rYCrp/

我处理 CSS 和跨浏览器问题已经很长时间了……这是我第一次遇到这样的事情，我完全陷入困境……不知道该怎么办！

任何人都知道如何用 border-width:1px 解决这个问题？

我将通过使用相邻选择器来实现这一点，如下所示：

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/ http://jsfiddle.net/JaF5h/36/