使用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？

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

这是一个有点重复，但它acheives你后通过设置效果第一行和第一列的顶部和左边界，然后用红色覆盖“内部”行和单元格。

这当然不会在IE6中工作，因为它不理解相邻的选择器。

http://jsfiddle.net/JaF5h/36/

Answer 2

尝试它为我工作如下：

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

table td { 
    border: 1px solid red; 
} 

Answer 3

我离开了一些重要的东西。 jsFiddle使用重置表“标准化”CSS。如果您取消选中左侧的“normalize css”复选框，您将会看到黑色边框。不过，如果没有重置样式表，将会有一些额外的填充移除。

Answer 4

试试这个：

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

Answer 5

围绕创建您的表核实。设置表格外部的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; 
} 

Answer 6

以前的答案并没有完全解决这对我来说。接受的答案允许内部边框与外部边框重叠。经过一番实验后，我想出了以下解决方案。

通过设置表格折叠样式来分隔内部边框不会与外部重叠。从那里，额外和加倍的边界被消除。

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/