[HTML] table内のセルの書式をCSSで

質問

tableで10列x５行の表を作っています。例えば

（他は通常状態として）
2列目の背景を赤、7列目の背景を青
3行目の文字をbold、5行目の文字をitalic

という書式（スタイル？）を設定するにはどうしたらよいでしょうか
<td class="red_bold">
<td class="red_italic">
<td class="blue_bold">
<td class="blue_italic">

というような、すべての組み合わせを網羅したclass定義をしなければいけないのでしょうか
もう少しスマートなやり方がありそうな気がするのですが

回答No.2

dell_OK · ベストアンサー

classを書式ごとに分ける方法はどうでしょうか。
スペースで区切って書きます。
<td class="red bold">
<td class="red italic">
<td class="blue bold">
<td class="blue italic">
スタイルはそれぞれで定義します。
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

お礼

回答ありがとうございました。

... 複数classを並べて書けばそれぞれ適用されるのですね！
classの指定は1つだけと思い込んでいました（苦笑）

回答No.5

retorofan

No.1です。
おっと、先ほどのはJavaScriptのコードでする場合でした。

CSSでするには、初めの記法でなくても、
１番目の表の２列目の背景色を赤くするのなら、
table:first-of-type tr td:nth-of-type(2) {
border: 2px solid red;
}
こう設定しておけば表にＩＤが無くてもできます。

お礼

引き続きご回答ありがとうございました。

>>当該の複数表は、動的に生成しておりまして、
>
>それなのに、できたtableタグのにわざわざ記述するなんて、
>徒労にすぎますね。

おそらくプロの方の「動的」と私の「動的」は違うものを指すのでしょうね（苦笑）

現状、XMLで記述した表のデータをXSLTでHTML化しています
なので、表示対象は素のHTMLなのです（トーシロウの表現ですが）
表のデータが更新（追加や順序の変更）されるたび、HTMLも更新します
すると「１番目の表」「２番目の表」というのも確たるものではありません。
まどろっこしいでしょうが、tableにそれぞれスタイル設定するのがマチガイないかと考えています（少なくとも私の技術レベルとデータ量では）

回答No.4

retorofan

＞当該の複数表は、動的に生成しておりまして、

それなのに、できたtableタグのにわざわざ記述するなんて、
徒労にすぎますね。

先ほどの私の記法なら、動的に生成した複数の表にも適用できます。
もし、表にＩＤを付けたくなければ、
const tables = document.querySelectorAll("table");
のようにNodeListを用意して、
１番目の表なら tables[0];
２番目の表なら tables[1];
のように、括弧内にインデックスを指定すればよいだけです。

回答No.3

retorofan

No.1です。

＞表が複数ある場合に、それぞれ適用したい行や列が異なります。
こんなときはどうしたらよいのでしょうか。

表が複数あって、おなじ行・同じ列の仕様ではないため、
表を特定する書き方が必要です。
具体的には表にＩＤをつければわかりやすくなります。
たとえば、
・１番目の表（id="table1"）の２列目の背景色を赤くする
・２番目の表（id="table2"）の３列目の背景色を赤くする
#table1 td:nth-child(2) {
background-color: red;
}
#table2 td:nth-child(3) {
background-color: red;
}
このようにすれば、それぞれの表に対応できます！

お礼

回答ありがとうございました。

ダメ元でお聞きします。
当該の複数表は、動的に生成しておりまして、
cssファイルや、htmlヘッダー部の<style>に記述するのはできれば避けたいのです。
tableタグのstyle属性に記述するようなやり方はありますか？
（tableを生成する際に書式もそこに記述する方法という意味です）

回答No.1

retorofan

テーブル内のTD要素にクラス属性を付けなくても
ＣＳＳだけでセルの書式設定ができます。
たとえば、
<style>
/* 指定列の背景色を設定 */
table td:nth-child(2) {
background-color: red;
}
table td:nth-child(7) {
background-color: blue;
}

/* 指定行の文字の太さ・字体を設定 */
table tr:nth-child(3) td {
font-weight: bold;
}
table tr:nth-child(5) td {
font-style: italic;
}
</style>
以上、お試しください。

お礼

回答ありがとうございました。

動作の確認ができました。ちなみに表が複数ある場合に、それぞれ適用したい行や列が異なります。こんなときはどうしたらよいのでしょうか。

よろしければ教えてください。