質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

7604閲覧

結合セルを含むTableで、列指定する方法を教えてください。td要素の数が異なるので`td:nth-of-type`で指定できません。

yuji38kwmt

総合スコア437

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2016/03/31 07:20

編集2016/04/03 11:19

#前提
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

おそらく、Selectors Level 4 の :nth-column() が求める擬似クラスですが、残念ながら実装しているブラウザはなさそうです。

kei344 さんが提案するように「人口」が最後の要素かつ横の結合セルでない前提なら :last-child が使えます。
条件に合わない場合はJavaScriptで期待するHTMLを生成するジェネレータを作るぐらいでしょうか。

  1. table.tBodies[0].rows[i].cells[j] を辿って対象の要素に class="population" を付与する
  2. table.outerHTML を出力
  3. 出力したHTMLをhtml文書んコピー&ペースト

Re: yuji38kwmt さん

投稿2016/03/31 15:48

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuji38kwmt

2016/04/03 11:02

回答ありがとうございます。 Selectors Level 4 では列指定の擬似クラスがあるんですね。 それが実装されるのを待ちつつ、think49さんの方法でHTMLを作成しようと思います。
guest

0

右側に結合列が無いのであれば。

CSS

1#afterTable td:nth-last-child(1) { 2 text-align:right; 3}

投稿2016/03/31 08:10

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuji38kwmt

2016/04/03 10:50

盲点でした... 確かに右から指定すればよいですよね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問