[解決済み] CSSを使用してテーブルの行の色を交互に変更しますか?
2022-03-19 12:20:20
質問
行の色が交互に変わるテーブルをこのように使っています。
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
<table>
<tr class="d0">
<td>One</td>
<td>one</td>
</tr>
<tr class="d1">
<td>Two</td>
<td>two</td>
</tr>
</table>
ここでは
tr
にのみ使用したいのですが
table
. テーブルにクラスを使用する場合、これは
tr
の代替となります。
CSSを使ってこのようにHTMLを書くことはできますか?
<table class="alternate_color">
<tr><td>One</td><td>one</td></tr>
<tr><td>Two</td><td>two</td></tr>
</table>
CSSで行をゼブラ柄にするにはどうしたらいいですか?
どのように解決するのですか?
$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});
tbody td{
padding: 30px;
}
tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>
CSSのセレクタには、nth-childという疑似セレクタがあります。純粋なCSSでは、次のようにすることができます。
tr:nth-child(even)
background-color: #000000;
}
注 IE 8ではサポートされていません。
または、jQueryがある場合。
$(document).ready(function()
{
$("tr:even").css("background-color", "#000000");
});
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)