使用 CSS 使表格的外边框颜色与单元格的边框颜色不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5875931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS to make table's outer border color different from cells' border color
提问by Ahmad Alfy
I want to use CSS to set a color of the outer border of the table ... Then the inner cells would have different border color ...
我想使用 CSS 来设置表格外边框的颜色......然后内部单元格会有不同的边框颜色......
I created something like this :
我创建了这样的东西：
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
问题是，表格的颜色会改变并变成红色，正如您在此处看到的：http: //jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
如果表格的边框宽度增加到 2px 它将起作用：http: //jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
我一直在处理 CSS 和跨浏览器问题……这是我第一次遇到这样的事情，我完全被卡住了……不知道该怎么办！
Any one knows how to get that fixed with border-width:1px ?
任何人都知道如何使用 border-width:1px 修复它？
采纳答案by ajcw
I would acheive this by using adjacent selectors, like so:
我会通过使用相邻的选择器来实现这一点，如下所示：
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;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
这有点重复，但它通过分别设置第一行和第一列的顶部和左侧边框，然后用红色覆盖“内部”行和单元格来实现您所追求的效果。
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
这当然不会在 IE6 中工作，因为它不理解相邻的选择器。
回答by Atari
Try this:
尝试这个：
tbody { display:block; margin: -1px; }
回答by Mike
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
以前的答案并没有完全为我解决这个问题。接受的答案允许内部边框与外部表格边框重叠。经过一些实验，我想出了以下解决方案。
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
通过设置表格折叠样式来分隔内部边框，不要与外部重叠。从那里消除了额外的和双重边界。
HTML:
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
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;
}
回答by Rick Penabella
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
在你的桌子周围创建一个 div。设置表格外部的 div 边框颜色。不要边框折叠您的表格。相反，让您的单元格分开以显示下方 div 的（内边框）背景颜色。然后将背景单元格设置为您选择的背景颜色。
HTML:
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
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;
}
回答by Ritesh Mengji
Try the following it worked for me:
尝试以下对我有用的方法：
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}
