3

ページのコンテンツ領域にいくつかのhtmlテーブルがあります。各テーブルの先頭で交互の行の色が新しく開始されるのではなく、テーブルのリスト全体に適用されるため、スタイルは奇妙です。

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
</table>

行の色は、cssが行の背景として設定するものを表しています。しかし、私はcssが次のテーブルのために交互を再開することを望んでいます。したがって、次のようになります。

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
</table>

THBODYそれとは何か関係がありますか？

ありがとう、

CSSコード

table { border-collapse:collapse; text-align:center; }

table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }

th { color: #fff;
background-color: #5c87b2; text-align:center; }

tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }

更新
それは忍び込んだバグかもしれません、私は提案されたフィドルを調べました、そしてそれは完全に機能するので、それはどこかのバグのあるコードです。

4

4 に答える 4

4

:nth-child()受け渡しevenとodd値の組み合わせを使用すると、簡単に実現できます。たとえば。このフィドルを参照してください。

ここで、CSSは

body {
    background-color: black;
    color: red;
}
table tr:nth-child(odd) {
    background-color: blue;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}
于 2013-03-26T15:49:31.090 に答える
2

あなたが持っている唯一の問題は、テーブルにタグがないことです。追加すれば完璧に動作します。tbodyタグとは何の関係もありません。

<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>
<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>

ここにフィドルがあります：http：//jsfiddle.net/rBwBm/

于 2013-03-26T15:52:13.573 に答える
0

javascriptを使ってやっていると思いますよね？おそらく$（'tr'）を使用してjqueryを介してtrのコレクションを取得しますか？代わりにCSSnth-child（odd）とnth-child（even）を使用してみてください。最近のほとんどのブラウザーでは、問題は発生しません。

于 2013-03-26T15:55:28.633 に答える
0

私が抱えていた問題は、2<TH>列で、交互の列の色付けでした。したがって、たとえば：

<tr>
    <th colpsan="2">Name</th>
</tr>
<tr>
    <th>First</th>
    <th>Last</th>
</tr>

これはBlue、行から開始してNameから交互に開始します。したがって、テーブル本体の最初の行は次のようになります。Blue

<tr>
    <th>Name</th>
</tr>

これは、前と同じように行Blueから開始し、Name次に交互に開始します。ただし、テーブル本体の最初の行は次のようになります。White

これらの状況では、それは私が達成したかったものではない変化するスタイルを示すでしょう。だから私がこれを修正するためにしたのは：

<thead>
    <tr>
        <th colpsan="2">Name</th>
    </tr>
    <tr>
        <th>First</th>
        <th>Last</th>
    </tr>
</thead>
<tbody>
   <!-- Table Content in Here -->
</tbody>

次に、スタイルシートを次のように変更しました。

tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}

つまり、基本的には、タグTBodyとTHeadタグを使用して、より具体的なcssスタイルを作成しました。より多くの制御、柔軟性。したがって、私の新しい例では、THead好きなだけ行を含めることができます。コンテンツは常にで始まりWhite、私の質問に答える必要があります。

THeadそれとは何か関係がありますか？

はい、それはそれと関係があるすべてを持っています。

于 2013-06-04T12:12:49.720 に答える