テーブルの文字色/背景色を行ごとに変更する(上級者向け)
アットウィキモードでのテーブル作成すると行(<tr>)ごとに
atwiki_tr_行番号というclassが付加されます。
また、奇数行・偶数行ごとにそれぞれ
atwiki_tr_odd・
atwiki_tr_evenというclassが付加されます。
これらと
CSSカスタマイズを利用して頂くことでテーブルの文字色/背景色を行ごとに変更することができます。
注: 今回の例では
#dividを使うことで、CSSの摘要範囲を限定しています。
奇数行・偶数行で文字色/背景色を変える
CSSカスタマイズで
div#atwiki_table_sample tr.atwiki_tr_odd {
color: #fff;
background: #999;
}
div#atwiki_table_sample tr.atwiki_tr_even {
color: #999;
background: #fff;
}
と設定し、
#divid(atwiki_table_sample){
|1行目は|奇数行|です|
|2行目は|偶数行|です|
|3行目は|奇数行|です|
|4行目は|偶数行|です|
}
上記のように入力すると
| 1行目は |
奇数行 |
です |
| 2行目は |
偶数行 |
です |
| 3行目は |
奇数行 |
です |
| 4行目は |
偶数行 |
です |
と表示されます.
行単位で文字色/背景色を変える
CSSカスタマイズで
div#atwiki_table_sample2 tr.atwiki_tr_1 {
color: #fff;
background: blue;
}
div#atwiki_table_sample2 tr.atwiki_tr_2 {
color: #fff;
background: #999;
}
div#atwiki_table_sample2 tr.atwiki_tr_3 {
color: blue;
background: #fff;
}
div#atwiki_table_sample2 tr.atwiki_tr_4 {
color: green;
}
と設定し、
#divid(atwiki_table_sample2){
|1行目は|白文字、青背景|です|
|2行目は|白文字、灰色背景|です|
|3行目は|青文字、白背景|です|
|4行目は|緑文字|です|
}
上記のように入力すると
| 1行目は |
白文字、青背景 |
です |
| 2行目は |
白文字、灰色背景 |
です |
| 3行目は |
青文字、白背景 |
です |
| 4行目は |
緑文字 |
です |
と表示されます.