1

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

  1. 修复表格，使表格标题中只有 1px 实心 FFF 的内部边框。
  2. 修复表格标题，使缺少的右边框完成。
  3. 在表格标题之后放置一个 1px 实心 #6B6B6B 的上边框（因为它似乎丢失了，我不知道如何修复它，我也在使用 IE 9）
  4. 从第一行（不是表头）开始交替行颜色（白色），然后在第二行（灰色）。

我只是 CSS 新手，不熟悉高级编程。

这是一个小提琴：http: //jsfiddle.net/3CzbV/

<!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>
4

2 回答 2

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

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

于 2012-11-03T17:42:20.977 回答
1

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

小提琴

于 2012-11-03T17:42:34.480 回答