エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS3】nth-childを使ってtableを装飾する
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS3】nth-childを使ってtableを装飾する
CSS3で追加された疑似クラスnth-childによって複雑な装飾をシンプルにまとめる事が可能になりました。 ... CSS3で追加された疑似クラスnth-childによって複雑な装飾をシンプルにまとめる事が可能になりました。 今回はnth-childを使ってテーブルを装飾してみます。 【CSS3】nth-childを使ってコードをすっきりさせることができる サンプル1:奇数行は赤、偶数行は青…と交互にセルを着色する。 赤・青と交互に行を着色したい時は、シンプルな記述でOK。 一行目のthは、グレーを指定しています。 よってnth-childが反映されているのは2行目の青からとなっています。 [html]tableを作る <table class="tableBorder sample01" width="700"> <caption>交互に赤青</caption> <tbody> <tr><th width="50">NO.</th><th>項目A</th><th>項目B</th></tr> <tr><