body、tdのフォントサイズの依存について教えて頂きたい事があります。
<style>
body{font-size:85%;}
td{font-size:85%;}
</style>
とした時、
<body>
フォントサイズ(bodyに直接)<br />
<table>
<tr>
<td>フォントサイズ(テーブル1つ)</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td>フォントサイズ(テーブル2重ネスト)</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
bodyのフォントサイズ > テーブル1つのフォントサイズ > テーブル2つのフォントサイズ
とネストをする毎にフォントが小さくなります。
この現象を回避する事は出来ますでしょうか。
上記を全て同じフォントサイズにしたい次第です。
ご存知の方がいましたらアドバイス頂けませんでしょうか。
よろしくお願いします。
確認環境は
Win IE6
mac Safari3 Firefox2
で上記の動作になります。
Winのfirefoxでは、テーブルをネストしてもフォントのサイズは一緒でした。(body > table1つ = table2つ)
No.2ベストアンサー
- 回答日時:
%での指定は相対指定なので、子要素に継承されます。
firefoxはtdを入れ子にした場合継承されないので、1重と2重のフォントサイズが同じになります。
(なぜそうなるかは詳しい人が解説してくれるでしょう!)
tdをfont-size:100% にすればbodyと同じになります。
なおtableの入れ子はxhtmlでは間違った記述なのでご注意を。
参考URL:http://diary.noasobi.net/flyson/xhtml_ref/table. …
この回答への補足
テストした所、DOCTYPEによってbodyとtdのフォントの依存関係が分かりました。
DOCTYPEが指定していない場合、とTransitionalだけど、URLの指定がない場合は、bodyとtdのフォントのサイズは依存しませんでした。
Transitional+URLとstrictの場合は、bodyとtdのフォントサイズは依存し、さらに、tableのネスト時にtdのサイズは上のtdに依存しました。
ありがとうございます。tdのフォントサイズは操作せず、bodyのみの操作で同じ大きさに成る事が確認出来ました。どうもありがとうございます。
No.1
- 回答日時:
上記ソースを試しましたが、winXP IE6,Firefox ともに、文字サイズは同じでした。
body{font-size:85%;}
table{font-size:85%;}
もしくは
body,table,td{font-size:85%;}
とか、tableセレクタにもやっていませんか?
この回答への補足
ありがとうございます。
スタイルの指定は記述したものだけです。
ソースを全部コピーしますと、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
<style>
body table td { margin:0px; padding:0px}
body
{
font-size:85%;
}
td
{
font-size:85%;
}
</style>
</head>
<body>
フォントサイズ(bodyに直接)<br />
<table>
<tr>
<td>フォントサイズ(テーブル1つ)</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td>フォントサイズ(テーブルネスト)</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
です。
DOCTYPEとか関係あるのでしょうか。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
HTML電卓で1文字消す方法
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
Duolingo のソースコードの名前...
-
HTML入門でもう躓いてしまった。
-
HTMLで画像をポップアップで表...
-
初心者html・CSS ウィンドウを...
-
スマホで、左右にスワイプして...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
HTMLです すいません教えてくだ...
-
フロントエンジニアで一人前と...
-
HTMLで特定の文字だけ色を変え...
-
WEBページを強制的に横画面で見...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
CSS、Bootstrapについて contai...
-
コードを書いて下さい( ; ; )...
-
htmlで<form>~</form>を並べて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマークの位置がずれてい...
-
ユーザーフォームの表示を追加...
-
Scratchでクイズのゲーム制作を...
-
HTMLでぶら下げインデントは出...
-
省略できるHTMLについて
-
bodyとtdのフォントサイズの依...
-
『タグの無効化』の表示方法に...
-
ホームページの文字点灯
-
複数タグ指定してHTMLを取得したい
-
HTMLで、2行目以降をほぼ1字下...
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
パワーポイント:テキストボッ...
-
Google Keepで数字に勝手に下線...
-
アンダースコア(下線)のあるメ...
-
AppleのNumbersというアプリで...
-
Latexにおける下線のひき方のコト
-
Word で下線の色の変え方
-
HTMLのbody内に<style>~</styl...
おすすめ情報