tdにスタイルシートをかけると、入れ子にすると文字が小さくなりすぎてしまいます

質問

どうしてもテーブルでレイアウトしなければいけない状況にあります。

それで、文字のサイズを下げようとtdにスタイルシートをかけると、テーブルレイアウトなので入れ子になっているところが文字が小さくなりすぎてしまいます。

td{
font-size:80%
}

としています。

こういった場合、入れ子の中には影響しないようにする方法、もしくはほかの方法がありましたら、ご教授お願いいたします。

回答No.4

js_player · ベストアンサー

CSSを

td{
font-size:80%
}

td td{
font-size:100%
}

とすると、入れ子の中には影響しなくなります。ただ、table でレイアウトするのはどうかと...。

補足

これだと、子セレクタのモダンブラウザ以外効かない問題は回避できそうですね。

このほうほうが、今のところベスト、でしょうか。

だいたい、テーブルでレイアウト自体がベストも何もないですけどｗ。

ありがとうございます。

回答No.3

izayoimizuki

> どうしてもテーブルでレイアウトしなければいけない状況にあります。
ん...
tableを使うとレンダリングが遅くなりますよ.
tableを使わなければ絶対に再現できない配置は無いですよ.
と一応言っておくとしまして...

font-size:80%;は親要素のフォントサイズに対して80%のサイズにするということになります.
1段階目はBody要素に対して80%なので目的の通りの動作になっています.
しかし2段階目はBody要素に対して80%の80%(=64%)になっています.
これが小さくなりすぎる原因です.

himajin100000様の仰る方法の他にfont-size:12px;といったように直接サイズを指定することで回避できます.
body>tableのように子セレクタを使って限定するのもいいと思います.
ただしこの方法は比較的新しいブラウザでなければ適切に適用されない点に注意しなければなりません.

補足

子セレクタ、IE5.5でだめみたいですね。

入れ子の入れ子まで、子セレクタで設定しておくのが理想かもしれないですね。

テーブルでデザインしなきゃいけないとき、皆さんフォントのサイズはどこで決めているんでしょうね。。
だいたい、テーブルでデザインする人は、フォントのサイズをCSSで設定しないんでしょうか。そんなことはないと思いますが。。

みなさん、ありがとうございます。

回答No.2

nachi_t

文字サイズを小さくするのは、特定の「<td>」に対してですか？
それとも、特定の「<table>」内の「<td>」全てにですか？
念の為、前者と後者の両方を書いておきますね。

●前者
・スタイルシート
td.fseze {
font-size:80%
}

・HTML
<table><tr>
<td>a</td>
<td class="fseze">b</td>
</tr></table>

●後者
・スタイルシート
table.fseze td {
font-size:80%
}

・HTML
<table class="fseze"><tr>
<td>a</td><td>b</td>
</tr></table>

後者について補足。
後者の「<td>」内に「<table>」を入れる場合は、その中の「<td>」の文字サイズも小さくなります。

補足

＞文字サイズを小さくするのは、特定の「<td>」に対してですか？
＞それとも、特定の「<table>」内の「<td>」全てにですか？

すべてのtdに対して、となります。
特定ならば、idやclassの中のtdで、というようにしていけば出来そうですね。

＞後者の「<td>」内に「<table>」を入れる場合は、その中の「<td>」の文字サイズも小さくなります。

コレで悩んでいます。

テーブルでやってしまっているのもありますが、これ以上class,idを増やしたくないので、tdタグで一発でサイズを調整できるのが理想です。

って、こんな都合のいいのは難しいですよね。

回答No.1

himajin100000

>どうしてもテーブルでレイアウトしなければいけない状況にあります。
まぁ何か事情があるんだろう，Strictがどーのという話はおいておこう

俺はそれならclass属性やid属性を振ってセレクタをもっと限定するよ。

補足

入れ子が激しくて、その最後のテーブルにセレクタをせっていすればよいのかもしれませんが、、。

テーブルでレイアウト自体あれですよね。。。