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について
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
Google Keepで数字に勝手に下線...
-
パワーポイント:テキストボッ...
-
Word で下線の色の変え方
-
Wordでレイアウトを変えないで...
-
アンダースコア(下線)のあるメ...
-
htmlで、文字に線を囲むには何...
-
AppleのNumbersというアプリで...
-
フランス語の質問です。 J'aime...
-
PivotTableのデータソースを一...
-
ライブドアブログがタグ付けで...
-
Latexにおける下線のひき方のコト
-
高校英語 語法 わかりません!
-
【excelの下線(会計)とは】
-
秀丸・カーソル行に下線を引き...
-
Excelヘッダーの書式
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLコード内に、コード各部の...
-
HTMLで、2行目以降をほぼ1字下...
-
ユーザーフォームの表示を追加...
-
リストマークの位置がずれてい...
-
アクセス2000(ADO)のレコード更...
-
面白いタグ
-
ホームページの文字点灯
-
gaiax系ページでの背景の固定
-
bodyとtdのフォントサイズの依...
-
アメブロでの行揃えの記述方法
-
HTMLでぶら下げインデントは出...
-
歌詞のコピーライトについて
-
複数タグ指定してHTMLを取得したい
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
パワーポイント:テキストボッ...
-
URLが青くならない
-
Google Keepで数字に勝手に下線...
-
エクセル:セル内の文字列の下...
-
AppleのNumbersというアプリで...
おすすめ情報