[解決済み] CSSを使用してテーブルの行の色を交互に変更しますか?
2022-03-01 02:40:29
質問
行の色が交互に変わるテーブルをこのように使っています。
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の高さを画面の残りスペースで埋めるようにする
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み】「選択されたファイルがありません」を変更しました。
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] HTMLのバックスペース
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?