#前提
CSSで、列ごとに右寄せ左寄せなどスタイルを変えたいです。
対象テーブルは以下のような状態です。
- 静的なテーブル。JavaScriptやJSPなどで動的に作成していない
- 100行程度
- 結合セルあり
- SampleCode
結合セルがないTableの場合
結合セルがない場合、td:nth-of-type
で列指定できます。
html
1<table id="beforeTable"> 2 <caption>愛知県の人口一覧(結合セルなし)</caption> 3 <thead> 4 <tr> 5 <th>地域</th> 6 <th>人口(適当)</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>愛西市</td> 12 <td>100</td> 13 </tr> 14 <tr> 15 <td>名古屋市 中区</td> 16 <td>200</td> 17 </tr> 18 <tr> 19 <td>名古屋市 北区</td> 20 <td>300</td> 21 </tr> 22 <tr> 23 <td>一宮市</td> 24 <td>300</td> 25 </tr> 26 </tbody> 27</table>
css
1/* 結合セルがないテーブルなら人口列を右寄せにできる */ 2#beforeTable td:nth-of-type(2) { 3 text-align:right; 4}
結合セルがあるTableの場合
結合セルがある場合、td要素の異なるので、td:nth-of-type
で列指定できません。
html
1<table id="afterTable"> 2 <caption>愛知県の人口一覧(修正後)</caption> 3 <thead> 4 <tr> 5 <th colspan="2">地域</th> 6 <th>人口(適当)</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td colspan="2">愛西市</td> 12 <td>100</td> 13 </tr> 14 <tr> 15 <td rowspan="2">名古屋市</td> 16 <td>中区</td> 17 <td>200</td> 18 </tr> 19 <tr> 20 <td>北区</td> 21 <td>300</td> 22 </tr> 23 <tr> 24 <td colspan="2">一宮市</td> 25 <td>300</td> 26 </tr> 27 </tbody> 28</table>
css
1/* 修正後テーブルの場合td要素が変わるので、人口列を指定できない */ 2#afterTable td:nth-of-type(3) { 3 text-align:right; 4}
#実現したいこと
結合セルがあるテーブルに対して、CSSセレクタで列指定してスタイルを変えたいです。
その際、以下の対応方法以外で実現したいです。
- JavaScript, JSPなどで動的にTableを作る
⇒ すでにHTMLのみで作られているので。
- 人口列や地域列のtd要素にクラスを付与する
⇒ 行数が多いのでクラスを付与するのが面倒だから。
属性セレクタや否定擬似要素などを使えばうまくいく気がするのですが...
よい方法があれば教えてください。
追記
背景色設定ならcol/colgroup要素で設定できるんですけどね~
左寄せ/右寄せなどは設定できないんです。
http://www.tohoho-web.com/html/colgroup.htm
http://www.w3.org/TR/CSS21/tables.html#columns
https://developer.mozilla.org/ja/docs/Web/HTML/Element/col
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/03 11:02