IE11で が入っていても見た目を揃えたい

Win7/IE11環境で、ウェブ画面を作成しています。
以下のhtmlでREC1とREC2の行の終端を揃えたいのですが、うまくいきません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <META http-equiv="X-UA-Compatible" content="IE=Edge"> </HEAD> <TABLE ID="outputArea"> <TR valign="top"> <TD style="border-style:none;"> <TABLE> <TR> <TD style="border-style:none;" ID="outputAreaMeisai"><span style="background-color:#FF0000;"><font color=#FFFFFF>REC1 X X X X X X X X</font></span> </TD> </TR> <TR> <TD style="border-style:none;" ID="outputAreaMeisai"><span style="background-color:#FF0000;"><font color=#FFFFFF>REC2XXXXXXXXXXXXXXXX</font></span> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </HTML>

REC1もREC2も文字数は同じなのになぜ揃わないのでしょうか？
（が入っていると揃わないものなのでしょうか）

が入っていても、文字数を揃える為にはどうすればよいでしょうか？

kei344

2017/04/05 12:18

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

プロポーショナルフォントを使用している場合、文字幅は一定になりませんので、等幅フォントを指定して下さい。

CSS
1td {
2  font-family: monospace ;
3}

Re: tttttttttt さん

投稿2017/04/05 12:08

think49

総合スコア18162

tttttttttt

2017/04/05 12:43

ご回答ありがとうございます。ご指摘の通り、htmlを以下に修正したら意図したとおりになりました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <META http-equiv="X-UA-Compatible" content="IE=Edge"> <STYLE TYPE="text/css"> td { font-family: monospace ; } </STYLE> </HEAD> <TABLE ID="outputArea"> <TR valign="top"> <TD style="border-style:none;"> <TABLE> <TR> <TD style="border-style:none;" ID="outputAreaMeisai"><span style="background-color:#FF0000;"><font color=#FFFFFF>REC1 X X X X X X X X</font></span> </TD> </TR> <TR> <TD style="border-style:none;" ID="outputAreaMeisai"><span style="background-color:#FF0000;"><font color=#FFFFFF>REC2XXXXXXXXXXXXXXXX</font></span> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </HTML>

行動規範の内容に同意します