テーブルのTD枠内を一部はセンタリング、一部は左寄せに表記したい場合は、どのようにCSSを設定すればよいのでしょうか?ご存知の方がおりましたらご教授いただければと思います。

Question

idetuyo

114

109もっと見る

200pt

ウェブ制作

テーブルのTD枠内を一部はセンタリング、一部は左寄せに表記したい場合は、どのようにCSSを設定すればよいのでしょうか?ご存知の方がおりましたらご教授いただければと思います。

回答の条件

1人5回まで

登録：2013/04/13 17:18:03
終了：2013/04/13 20:28:27

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2013-04-13T18:18:38+09:00

No.1

a-kuma3497321542013/04/13 18:18:38

200pt

センタリングしたい TD に class や id 属性で目印を付けて、それに対して text-align: center; を指定するのが基本です。
もし、HTML の方が変更できないのであれば nth-child 擬似クラスというのを使うと、「何番目」を指定してスタイルを適用することができます。

<table border="1" id="table">
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
</tr>
<tr>
<td>Ａ</td>
<td>Ｂ</td>
<td>Ｃ</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
</tr>
</table>

TABLE#table TR TD {
    width: 5em;
}
TABLE#table TR:nth-child(2) TD:nth-child(2) { /* TR の2番目、TD の2番目を指定 */
    text-align: center;
}

jsFiddle でサンプルを書いてみたので、実際の感じを見てください。
http://jsfiddle.net/a_kuma3/4KVM2/1/

他12件のコメントを見る

ありがとうございます。一つのテーブルの中で、中央のTDと左寄せのTDを構築したいのですが、これはどのように設定したらよいでしょうか？

2013/04/13 18:58:43

一つのテーブルの中で、中央のTDと左寄せのTDを構築したい

ひとつのテーブルで、センタリングしている TD と、左寄せの TD を混ぜたつもりなんですけど、ひとつの TD の中で、センタリングと左寄せを混ぜたい、ということですか？
id:idetuyo さんがイメージしている絵があると、答えやすいです。
フォトライフとか。

2013/04/13 19:04:27

ありがとうございます。サンプルの方を良く確認しておりませんでした。確認してトライしています。

2013/04/13 19:12:13

具体的には、こちらのページ　http://www.cresti.co.jp/contents/print/color.html　のテーブル2つ目にある1000枚以上はご相談ください。の部分を左寄せにしたいです。他はセルは基本的にセンタリングとしたいです。

2013/04/13 19:15:52

スタイルシートに、以下のような記述を追加すると、指定の TD だけ左寄せになると思います。

TABLE.mb0 TR:nth-child(6) TD:nth-child(2) { /* TR の6番目、TD の2番目を指定 */
    text-align: left !important;
}

2013/04/13 19:25:06

そのテーブルの六行目は、たまたま TD がひとつしかないので、TD の nth-child の指定が無くても大丈夫なはずです。

TABLE.mb0 TR:nth-child(6) TD { /* TR の6番目の TD を指定 */
    text-align: left !important;
}

他のスタイルがいろいろ混ざり合ってるときには、!important を付けると、それが優先されます。
複数の !important があると、また微妙な感じになるのですが。

2013/04/13 19:29:34

この場合だったら、スタイルに書かなくても、TD に直接 style 属性で左寄せを指定しても良いかもしれませんね。

<td colspan="3" align="left">&nbsp;1000枚以上はご相談ください。複数の案件を同時にご注文される場合は、印刷枚数をまとめて計算しますので、印刷価格も
お徳です。
</td>

というところを、以下のように style 属性を追加する。

<td colspan="3" align="left" style="text-align: left;">&nbsp;1000枚以上はご相談ください。複数の案件を同時にご注文される場合は、印刷枚数をまとめて計算しますので、印刷価格も
お徳です。
</td>

2013/04/13 19:36:26

スタイルシートに書かずに、スタイル属性だけ追加してやってみたのですが、ページが壊れてしまいました＾＾；；やはり記入しないとだめのようです。

2013/04/13 19:43:54

TABLE.mb0 TR:nth-child(6) TD { /* TR の6番目の TD を指定 */
text-align: left !important;
}

他のページにもたくさんテーブルがあるので、このテーブルのみにしたいのですが、この内容をスタイルシート記入し、HTMLファイルのタグには該当のテーブルタグにclass=mb0で指定してあげれば良いということでしょうか？

2013/04/13 19:47:49

該当のテーブルには mb0 というクラスは、既についています。
ただ、ひとつ前の「ペラ物」のテーブルにも mb0 というクラスが付いてるんですよね。
他のページでも同じだと思うので、あのテーブルだけに限定するなら、TD にスタイル属性を付ける方が良いと思うんです。

どういうふうにページが壊れたんでしょうか。
属性のダブルクォートが片方無かったり、全角だったり、ということはありませんか？
該当する TD の > の前に、↓を追加するだけなんですが...

 style="text-align: left;"

2013/04/13 20:11:17

今、もう一度やってみましたところ、ばっちり該当セルのみ左寄せできました。
ありがとうございます！本当に助かりました。

http://www.cresti.co.jp/contents/print/color.html

2013/04/13 20:18:16

ちなみに該当セル内の文字を部分的に赤文字、太文字にする場合もやはりCSSにて個別で紐付けする必要がありますでしょうか？

2013/04/13 20:19:11

良かった　:-)

部分的に赤文字、太文字にする場合もやはりCSSにて個別で紐付けする必要がありますでしょうか？

そうです。タグやIDで目印をつけてあげる必要があります。
例えば、こんな感じで。

<span style="color: red; font-weight: bold">印刷枚数をまとめて計算します</span>

太字はスタイルじゃなくて、タグにしても良いかも。

<b style="color: red;">印刷枚数をまとめて計算します</b>

2013/04/13 20:26:05

なるほど、ありがとうございます。スタイルを触らずにタグ変更だけでできるならばありがたいです。ありがとうございます！本当に助かりました。

2013/04/13 20:28:14

テーブルのTD枠内を一部はセンタリング、一部は左寄せに表記したい場合は、どのようにCSSを設定すればよいのでしょうか?ご存知の方がおりましたらご教授いただければと思います。

ベストアンサー

a-kuma3497321542013/04/13 18:18:38

コメント（0件)

この質問への反応（ブックマークコメント）