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

Question

我想使用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来解决这个问题吗？

- Ahmad Alfy

---

我漏掉了一些重要的东西。jsFiddle会使用重置样式表来“标准化”CSS。如果你在左侧取消选择“标准化CSS”复选框，你将得到黑色边框。但是，没有重置样式表，还需要去除一些额外的填充。 - PetrolMan

每个解决这个问题的方案都归结为一个hackish的解决方法，因为CSS没有给我们手动解决折叠边框冲突的方法——它只是强制执行一种有争议的“经验法则”（在每个边缘上选择最“引人注目”的边框样式）。我还没有找到一个解决方案（我想我已经尝试了所有的解决方案），能够在所有情况下都很好地工作。即使是!important在这个空间也会失败。令人难以置信的是，没有人预见到在表格上有不同颜色的外边框的愿望。 - Kal

Answer 1

我会使用相邻选择器来实现，如下所示：

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/

- ajcw

---

完美地工作了...谢谢。老实说，我不想用相邻选择器来做它，但看起来没有其他方法了。 - Ahmad Alfy

请注意，John Catterfeld的解决方案并不像它看起来那么完美，详情请参见http://jsfiddle.net/JaF5h/37/。内部边框重叠在主要外边框上。在他的示例中，我们之所以看不到它，是因为它是黑线上的1个红色像素。用两个白色像素就变得明显了……可惜目前还没有解决方案。 - Guile

我认为这是不必要的“重复”，因为tr和td声明块用相同的值覆盖了折叠表边框，并被相邻单元格边框的值覆盖。因此，您可以放心地删除这两行。此外，在所有情况下，更加健壮的解决方案可能是针对单元格而不是行进行定位，因此tr + tr变成了tr + tr > td。 - Kal

Answer 2

试试这个：

tbody { display:block; margin: -1px; }

- mauteri

---

这个工作得非常完美...唯一的小问题是靠近表格的单元格边框也显示出来了...你可以在这里查看我的意思：http://jsfiddle.net/EpLj4/ - Ahmad Alfy

啊，我以为那是期望的效果。如果你不想要那个效果，那么可以这样做：tbody { display:block; margin: -1px }。 - mauteri

+1 很好的回答。我对你的回答进行了轻微的格式更改，以利用 SO 中的代码高亮显示。 - Andrie

好的，我也已经修改了答案。我一直在阅读Stack Overflow相当长的时间，但从未拥有过账户。在这里仍然是一个新手 :-) - mauteri

Answer 3

之前的回答并没有完全解决我的问题。接受的答案允许内部边框重叠外部表格边框。经过一些实验，我得出了以下解决方案。

通过将表格折叠样式设置为 separate，内部边框不会重叠外部边框。从那里开始，额外和加倍的边框都被消除了。

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;
}

https://jsfiddle.net/o5ar81xg/

- Mike

---

这是我的常规做法。需要注意的是，这种方式无法抵抗colspan或rowspan引起的边框异常。 - Siphalor

Answer 4

创建一个div包含你的表格。设置div的边框颜色为表格外部的颜色。不要使用border-collapse属性来合并表格边框。相反，让单元格分离以显示底层div的内部边框背景色。然后将单元格的背景色设置为你选择的背景色。

HTML：

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

CSS:

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}

- Rick Penabella

---

不幸的是，当表格样式变得复杂时，这可能是最可靠且最简单的方法。 - Katinka Hesselink

Answer 5

你可以尝试以下方法，这对我有效：

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}

- Ritesh Mengji

---

这个可以工作，但是即使你移除了1px，边框宽度仍然设置为2px。 - Ahmad Alfy