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

Using CSS to make table#39;s outer border color different from cells#39; border color(使用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/

这篇关于使用CSS使表格的外框颜色与单元格的边框颜色不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！