具有交替行颜色的内边框和外边框答案

【问题标题】：Inner and Outer Borders with Alternating row color具有交替行颜色的内边框和外边框
【发布时间】：2012-10-24 01:37:55
【问题描述】：

鉴于下面的当前 css 编码，我如何能够执行以下操作：

修复表格，使表格标题中只有 1px 实线 FFF 的内部边框。
修复表格标题，以完成缺失的右边框。
在表头后面加一个1px纯色#6B6B6B的上边框（好像没了，不知道怎么解决，我也是用IE 9）
从第一行（不是表头）开始交替行颜色（白色），然后在第二行（灰色）。

我刚接触 css，对高级编程不熟悉。

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
table {
    border-collapse: collapse;
    border: 1px solid #6B6B6B;
}
table th {
    color: red;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
}
table td {
    color: blue;
}
table td, table th {
    border: 1px solid #6B6B6B;
}
table tr:first-child th {
    border-top: 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:last-child,
table tr th:last-child {
    border-right: 0;
}
</style>

</head>

<body>

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (2,1)</td>
        <td>Cell (3,1)</td>
        <td>Cell (4,1)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
        <td>Cell (3,2)</td>
        <td>Cell (4,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (2,3)</td>
        <td>Cell (3,3)</td>
        <td>Cell (4,3)</td>
    </tr>
</table>

</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

首先，您应该添加 <thead> 和 <tbody> 元素/标签，甚至可能添加 <tfoot>

HTML 标记

<div>
<table>
    <thead>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
        <th>Heading 4</th>
    </tr>
</thead>
    <tbody>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (2,1)</td>
        <td>Cell (3,1)</td>
        <td>Cell (4,1)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
        <td>Cell (3,2)</td>
        <td>Cell (4,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (2,3)</td>
        <td>Cell (3,3)</td>
        <td>Cell (4,3)</td>
    </tr>
</tbody>
</table>
</div>

风格

div{
    background-color: grey;
    margin: 20px;
    padding: 10px;
}

table {
    border-collapse: collapse;
    border: 1px solid #6B6B6B;
    margin: 20px;
}

/* 1.Fix the table such that there is an INNER border only of 1px solid FFF in the table headers*/
/* 2.Fix the table header such that the missing right border is completed */

table thead tr th {
    border: 1px solid #FFF;

/* 3.Put a top border of 1px solid #6B6B6B after the table headers */
    border-bottom: 1px solid #6B6B6B; 
}

table tbody tr:nth-child(odd) {
background-color: white;
}

Fiddle

【讨论】：

比我的@jawad 更好的答案 :)。我喜欢你使用边框折叠固定表格本身的方式。

【解决方案2】：

首先，这是小提琴http://jsfiddle.net/EVjJU/2/

/*color different tbody rows*/
tbody tr:nth-child(odd) {
    background-color: #ffffff;
}
tbody tr:nth-child(even) {
    background-color: #cccccc;
}
/*first tbody row with a top border*/
tbody tr:first-child td {
    border-top: 5px #ffffff solid;    
}
/*there is no right border missing to my knowledge?*/
/*thead inner border or 1px white*/
thead th {
    border-right: 1px #ffffff solid;
}

我不太明白标题部分缺少的右边框，你能详细说明一下吗？

【讨论】：

不，伙计。边界崩溃已经存在于 OP 的代码中。除了您使用原始 CSS 之外，我只是删除了它们。我很懒惰。 +1