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

2022-03-26 00:00:00 border css css-tables

我要使用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进行固定吗?


解决方案

我将使用相邻选择器来实现此目的,如下所示:

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/

相关文章