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

它有点重复，但它分别通过设置第一行和第一行的顶部和左边框，然后用红色覆盖“内部”行和单元格来实现您所效果的效果。

这当然不适用于IE6，因为它不了解相邻的选择器。

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

Answer 2

试试这个：

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

Answer 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/

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

Answer 5

尝试以下它对我有用：

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

table td {
    border: 1px solid red;
}

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

5 个答案: