人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: idetuyo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●200ポイント ベストアンサー

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

<table border="1" id="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</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/


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

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

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

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

a-kuma3さんのコメント
スタイルシートに、以下のような記述を追加すると、指定の TD だけ左寄せになると思います。 >|css| TABLE.mb0 TR:nth-child(6) TD:nth-child(2) { /* TR の6番目、TD の2番目を指定 */ text-align: left !important; } ||<

a-kuma3さんのコメント
そのテーブルの六行目は、たまたま TD がひとつしかないので、TD の nth-child の指定が無くても大丈夫なはずです。 >|css| TABLE.mb0 TR:nth-child(6) TD { /* TR の6番目の TD を指定 */ text-align: left !important; } ||< 他のスタイルがいろいろ混ざり合ってるときには、!important を付けると、それが優先されます。 複数の !important があると、また微妙な感じになるのですが。

a-kuma3さんのコメント
この場合だったら、スタイルに書かなくても、TD に直接 style 属性で左寄せを指定しても良いかもしれませんね。 >|html| <td colspan="3" align="left">&nbsp;1000枚以上はご相談ください。複数の案件を同時にご注文される場合は、印刷枚数をまとめて計算しますので、印刷価格も お徳です。 </td> ||< というところを、以下のように style 属性を追加する。 >|html| <td colspan="3" align="left" style="text-align: left;">&nbsp;1000枚以上はご相談ください。複数の案件を同時にご注文される場合は、印刷枚数をまとめて計算しますので、印刷価格も お徳です。 </td> ||<

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

idetuyoさんのコメント
TABLE.mb0 TR:nth-child(6) TD { /* TR の6番目の TD を指定 */ text-align: left !important; } 他のページにもたくさんテーブルがあるので、このテーブルのみにしたいのですが、この内容をスタイルシート記入し、HTMLファイルのタグには該当のテーブルタグにclass=mb0で指定してあげれば良いということでしょうか?

a-kuma3さんのコメント
該当のテーブルには mb0 というクラスは、既についています。 ただ、ひとつ前の「ペラ物」のテーブルにも mb0 というクラスが付いてるんですよね。 他のページでも同じだと思うので、あのテーブルだけに限定するなら、TD にスタイル属性を付ける方が良いと思うんです。 どういうふうにページが壊れたんでしょうか。 属性のダブルクォートが片方無かったり、全角だったり、ということはありませんか? 該当する TD の &gt; の前に、↓を追加するだけなんですが... >|txt| style="text-align: left;" ||<

idetuyoさんのコメント
今、もう一度やってみましたところ、ばっちり該当セルのみ左寄せできました。 ありがとうございます!本当に助かりました。 http://www.cresti.co.jp/contents/print/color.html

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

a-kuma3さんのコメント
良かった <tt>:-)</tt> >> 部分的に赤文字、太文字にする場合もやはりCSSにて個別で紐付けする必要がありますでしょうか? << そうです。タグやIDで目印をつけてあげる必要があります。 例えば、こんな感じで。 >|html| <span style="color: red; font-weight: bold">印刷枚数をまとめて計算します</span> ||< 太字はスタイルじゃなくて、タグにしても良いかも。 >|html| <b style="color: red;">印刷枚数をまとめて計算します</b> ||<

idetuyoさんのコメント
なるほど、ありがとうございます。スタイルを触らずにタグ変更だけでできるならばありがたいです。ありがとうございます!本当に助かりました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ