1

以下の現在のcssコーディングを考えると、どうすれば次のことができるでしょうか。

  1. テーブルヘッダーに1pxのソリッドFFFのみの内側の境界線があるようにテーブルを修正します。
  2. 欠落している右の境界線が完成するようにテーブルヘッダーを修正します。
  3. テーブルヘッダーの後に1pxの実線＃6B6B6Bの上部の境界線を配置します（欠落しているように見え、修正方法がわからないため、IE 9も使用しています）
  4. 行の色（白）を最初の行（テーブルヘッダーではない）から交互に変更し、2番目の行では（灰色）になります。

私は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>まず、<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 に答える