CSSでtext-align

質問

不思議な現象が起きてます。

2行7列の表を作って、
2行目の3～5列と7列目を右寄せにしたいがために、
<td class="right">
で外部CSSに
.right{
text-align:right;
}
と記述したところ適用されませんでした。
しかしインラインで
<td style="text-align:right;">
と書くと右寄せになるんです・・・

原因がわからずこまっています。
ちなみに
<td align="right">
でも表示されませんでした・・・

table全体には以下のCSSが外部で適用されてます、
div.gray_box {
background-color: #FFFFFF;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
padding: 1px 0 1px 0;
}
table.wide_table_border {
border: 1px solid #FFFFFF;
border-collapse:collapse;
margin: 0px auto;
padding: 5px;
width: 100%;
}
あまり関係ないとは思うのですが一応載せておきます。

目的としては、必ず外部CSSに記述することです。

回答No.1

yambejp · ベストアンサー

デバグの方法としてはこんなところですかねぇ

(1)HTML内部に
<style type="text/css">
.right{
text-align:right;
}
</style>
として反映するかどうか確かめる

(2)class名をかえてみる。
rightなんて一般的な名前だと別の箇所で実はつかわれてる可能性も
あるでしょうから、たとえばtdrightなどにしてみる

(3)cssの表記にタグを明示する
td.right{・・・}

(4)important宣言してみる
text-align:right ! important;

お礼

すみません。

４で解決しました。
importantの詳しい役割がよくわからず、
それで解決したということはどういうことがいえるのか解説願えますでしょうか？

補足

どれも効果無しでした。

やはり該当する場所が左寄せになってしまいます・・・

回答No.2

yambejp

状況からすると、cssファイルが無効になっているという致命的な
話ではなさそうですね。
また、クラス名やIDの競合でもなさそうなので、
おそらく別要素などでtext-alignが指定されているものが優先されている
と類推します。

あやしいのは
*、body、table、tr、tbody、tdなどタグにtext-alignが設定されていませんか？
その場合は順位をあげるような記述をする必要があると思います。
基本的には! importantは、やむにやまれないときにしか使わないほうが
よいですから。（使っちゃいけないとは言いませんが、見る人がみれば
センスやスキルがないプログラマだと思われることでしょう・・・）

補足

なるほど・・・

CSSを調べてみたところ、
確かに他の部分でかかっているtext-alignがありました。

ありがとうございました。