使用CSS使表格的外框颜色与单元格的边框颜色不同
我要使用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/
相关文章