Question

考虑到下面的当前css编码，我怎样才能做到以下几点：

修复表格，使表格标题中只有1px实心FFF的INNER边框。
修复表格标题，以便完成缺少的右边框。
在表格标题后放置1px solid＃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>

Answer 1

首先，这是小提琴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;
}

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

Answer 2

首先，您应该添加<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

内部和外部边界与交替行颜色

2 个答案: