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

【问题标题】：Using CSS to make table's outer border color different from cells' border color使用 CSS 使表格外边框颜色与单元格的边框颜色不同
【发布时间】：2011-08-18 01:40:56
【问题描述】：

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

【问题讨论】：

我遗漏了一些重要的东西。 jsFiddle 使用重置表“规范化”CSS。如果您取消选择左侧的“规范化 css”复选框，您将获得黑色边框。不过，如果没有重置样式表，将会有一些额外的填充要删除。
这个问题的每一个解决方案都归结为一个骇人听闻的解决方法，因为 CSS 没有给我们一种手动解决折叠边界冲突的方法——它只是强制执行一个固执己见的 'rule of thumb ......选择了“醒目的”边框样式'。我还没有找到一种在所有情况下都能正常工作的解决方案（我想我已经尝试过所有这些）。即使!important 在这个空间里也失败了。令人难以置信的是，没有人预见到希望在桌子上使用不同颜色的外边框。

标签： css border css-tables

【解决方案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/

【讨论】：

完美运行...谢谢。坦率地说不想用相邻的选择器来做，但看起来没有别的办法了。
请注意，John Catterfeld 的解决方案并不完美，看起来... 见jsfiddle.net/JaF5h/37 内边框覆盖主要外边框在他的示例中，我们看不到它，因为它是黑线上的 1 个红色像素。有了两个白色像素，它就变得很明显了......不幸的是还没有解决方案
我会说不必要的“重复”，因为 tr 和 td 声明块用相同的值覆盖折叠的表格边界，并且它们本身被单元格边界的相邻兄弟值覆盖。所以你可以愉快地删除这两行。此外，在所有情况下，更稳健的解决方案可能是针对单元格而不是行，因此 tr + tr 变为 tr + tr > td。

【解决方案2】：

试试这个：

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

【讨论】：

这个工作完美...显示的一个小问题是靠近表格的单元格的边框也出现了...您可以在这里查看我的意思：jsfiddle.net/EpLj4
啊，还以为是想要的效果呢。如果您不想这样做，那么： tbody { display:block;边距：-1px }
+1 不错的答案。我对您的答案进行了细微的格式更改，以使用 SO 中的代码突出显示。
好点，也对答案进行了更改。我已经阅读堆栈溢出很长一段时间了，但从未有过帐户。这里还是个新手 :-)

【解决方案3】：

以前的答案并没有完全为我解决这个问题。接受的答案允许内部边界与外部表格边界重叠。经过一些实验，我想出了以下解决方案。

通过设置表格折叠样式来分隔内部边框不重叠外部。从那里消除了多余的和双重的边框。

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/

【讨论】：

这是我通常的做法。应该注意的是，这对 col- 或 rowspans 没有抵抗力。这两种设置都可能导致边界异常。

【解决方案4】：

围绕您的表格创建一个 div。设置表格外部的 div 边框颜色。不要边框折叠你的桌子。相反，让您的单元格分开以显示下方 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;
}

【讨论】：

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

【解决方案5】：

尝试以下对我有用的方法：

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

table td {
    border: 1px solid red;
}

【讨论】：

这个可行，但即使您删除了 1px，边框宽度也设置为 2px 而不是 1px