IEで<td>の全角を有効にする方法

質問

tableの<td>の表示を全角４字で固定したいため、
例えば動物は動△物△（△は全角スペースです）としています。

firefoxなどでは想定した通りの表示になっていますが、
IEでは全角スペースも詰まって動△物と表示されてしまいます。
これを回避するにはCSSで指定するしかないのでしょうか。

回答No.1

ORUKA1951 · ベストアンサー

＞例えば動物は動△物△（△は全角スペースです）としています。

　HTMLにおいては、決して・・もっとも行ってはならない手法です。目の見えない人の読み上げブラウザは、間を区切って読みます。検索エンジンにも意味が伝わりません。データの再利用が出来ません。

★14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
★構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
★HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )
などをよくお読みください。

[HTML]
<table summary="td:justfy">
<tbody>
<tr class="letter-spacing">
<th>letter-spacing</th>
<td style="letter-spacing:1em;padding-left:1.5em;">動物</td><td style="letter-spacing:0.5em;padding-left:1em;">微生物</td><td style="letter-spacing:1em;padding-left:1.5em;">植物</td><td style="padding-left:0.5em;padding-right:0.2em">水生動物</td>
</tr>
<tr>
<th>normal</th>
<td>動物</td><td>微生物</td><td>植物</td><td>水生動物</td>
</tr>
</tbody>
</table>

{CSS}
table{border-collapse:collapse;border:solid 1px gray;}
th,td{border:solid 1px gray;}
td{width:4.5em;}
tr.letter-spacing td{padding:0;letter-spacing:0}

なお、tdで使用するfont-familyをmonospaceに指定しておくと、良いかもしれません。

お礼

いつもご丁寧に有り難うございます。
以前に半角スペースはHTMLで特別の意味を持つと聞いたので、
そういう場合は全角にするものだとばかり思ってました・・・

先方から全角スペース付きでデータが送られてきます。
widthで行うべきですか。ウーン、どうしよう。

回答No.4

ORUKA1951

10進数での数値文字参照は、実体に置き換わるようなので
<h2>等幅フォント</h2>
<ul style="font-family:monospace;">
<li>Word Joiner　　　　　　　(&#x2060;■&#8288;■---)
<li>Ideographic space　　　　(&#x3000;■&#12288;■---)
<li>Zero width no-break space(&#xfeff;■&#65279;■---)
<li>en space　　　　　　　　 (&#x2002;■&#8194;■&ensp;)
<li>em space　　　　　　　　 (&#x2003;■&#8195;■&emsp;)
<li>thin space　　　　　　　 (&#x2009;■&#8201;■&thinsp;)
<li>zero width non-joiner　　(&#x200c;■&#8204;■&zwnj;)
<li>zero width joiner　　　　(&#x200d;■&#8205;■&zwj;)
<li>left-to-right mark　　　 (&#x200e;■&#8206;■&lrm;)
<li>right-to-left mark　　　 (&#x200f;■&#8207;■&rlm;)
</ul>
<h2>プロポーショナルフォント</h2>
<ul style="font-family:sans-serif">
<li>Word Joiner　　　　　　　　　(&#x2060;■&#8288;■---)
<li>Ideographic space　　　　　 (&#x3000;■&#12288;■---)
<li>Zero width no-break space(&#xfeff;■&#65279;■---)
<li>en space　　　　　　　　　　　(&#x2002;■&#8194;■&ensp;)
<li>em space　　　　　　　　　　 (&#x2003;■&#8195;■&emsp;)
<li>thin space　　　　　　　　　　(&#x2009;■&#8201;■&thinsp;)
<li>zero width non-joiner　　　(&#x200c;■&#8204;■&zwnj;)
<li>zero width joiner　　　　　　(&#x200d;■&#8205;■&zwj;)
<li>left-to-right mark　　　　　 (&#x200e;■&#8206;■&lrm;)
<li>right-to-left mark　　　　　 (&#x200f;■&#8207;■&rlm;)
</ul>

　これでおかしいなら、&を&に変換する。

回答No.3

ORUKA1951

スペースの種類ですが、HTMLでは、空白文字は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLでは、次に挙げる文字だけが空白類文字であると定義される。
・ASCIIスペース (&#x0020;)　no-break space &nbsp; 折り返し禁止の空白
・水平タブ (&#x0009;)　　　　
・書式送り (&#x000C;)　　　　
・ゼロ幅スペース (&#x200B;)　
行区切り類もまた、空白類文字である。
ここで、&#x2028; 及び &#x2029; が[ISO10646]では行や段落を明確に分離するものと定義されているが、HTMLでは行区切り類に含まれないし、更に本仕様は両者を空白類文字一般にも含めないという点に、注意されたい。

本仕様は、ここに空白類文字と明示的に定めたもの以外のスペース文字類については、レンダリングその他の挙動を示すことはない。この理由から、著者は、空白類を含む視覚的整形効果を及ぼすためには、
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
スペース類文字ではなく適切な要素あるいはスタイル指定を行う必要がある。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［9.1 空白類( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )］より

上で言う「視覚的整形効果を及ぼすために使えないスペース類文字」とは下記のものです。

(数値文字参照16進　数値文字参照10進　文字実体参照)の順
・Word Joiner　　　　　　　　(&#x2060;　⁠　---)
・Ideographic space　　　　　(&#x12288;　&#x3000;　---)
・Zero width no-break space(#65279;　&#xfeff;　---)
・en space　　　　　　　　　(&#x2002;　 　&ensp;
・em space　　　　　　　　　(&#x2003;　 　&emsp;
・thin space　　　　　　　　(&#x2009;　 　&thinsp;)
・zero width non-joiner　　(&#x200c;　‌　&zwnj;)
・zero width joiner　　　　(&#x200d;　‍　&zwj;)
・left-to-right mark　　　 (&#x200e;　‎　&lrm;)
・right-to-left mark　　　 (&#x200f;　&#8207　&rlm;)

　よって&emsp;はMと同じ巾の空白と言うことですから、やはり文字の間隔調整には使えません。

　これらの視覚効果は書きソースを表示してみると良いでしょう。
<h2>等幅フォント</h2>
<ul style="font-family:monospace;">
<li>Word Joiner　　　　　　　(&#x2060;■⁠■---)
<li>Ideographic space　　　　(&#x3000;■　■---)
<li>Zero width no-break space(&#xfeff;■■---)
<li>en space　　　　　　　　 (&#x2002;■ ■&ensp;)
<li>em space　　　　　　　　 (&#x2003;■ ■&emsp;)
<li>thin space　　　　　　　 (&#x2009;■ ■&thinsp;)
<li>zero width non-joiner　　(&#x200c;■‌■&zwnj;)
<li>zero width joiner　　　　(&#x200d;■‍■&zwj;)
<li>left-to-right mark　　　 (&#x200e;■‎■&lrm;)
<li>right-to-left mark　　　 (&#x200f;■&#8207■&rlm;)
</ul>
<h2>プロポーショナルフォント</h2>
<ul style="font-family:sans-serif">
<li>Word Joiner　　　　　　　　　(&#x2060;■⁠■---)
<li>Ideographic space　　　　　 (&#x3000;■　■---)
<li>Zero width no-break space(&#xfeff;■■---)
<li>en space　　　　　　　　　　　(&#x2002;■ ■&ensp;)
<li>em space　　　　　　　　　　 (&#x2003;■ ■&emsp;)
<li>thin space　　　　　　　　　　(&#x2009;■ ■&thinsp;)
<li>zero width non-joiner　　　(&#x200c;■‌■&zwnj;)
<li>zero width joiner　　　　　　(&#x200d;■‍■&zwj;)
<li>left-to-right mark　　　　　 (&#x200e;■‎■&lrm;)
<li>right-to-left mark　　　　　 (&#x200f;■&#8207■&rlm;)
</ul>

お礼

再度の詳しい回答有り難うございます。
前のお礼に書きましたがデータは向こうから送られてきます。

向こうの考え方では、列幅がだいたい全角４字分の長さで
確保されていればいいという考え方のようです。
見た目そこそこなら良しとしているようです。

widthで対処できましたから、そちらでやりますけど。

回答No.2

神崎 渉瑠（@taloo）

全角スペースの代わりに&emsp;ではダメでしょうか？

HTMLにおいて、「英語や日本語などの文法で空白を意味する文字はいわゆる半角スペースと同じ扱いとする」という文書をどこか（W3Cサイト内）で見たことがあります。
これをそのまま実装するとブラウザのサポートが大変なことになると思いますので、実装していないブラウザの方が多いと思いますが。

&nbsp;を日本語文章の中で使用すると「日本語の文法」として間違うことになります。
AAや私的文書では問題ないと思いますが（私はそこまで文法に厳格ではありませんので）、
この文字（&nbsp;）は、アラビア語か何かの外国語で、空白が入る単語の空白部分を表現するための文字ですので、「二ュ一ス」（カタカナで「ニュース」と書くのではなく、漢数字の二、一を使用）とするような物です。

&emsp;をどこで使わなければならない文字かという記述が見当たらないため、おそらく全角スペースの代わりとして使っても、問題はないと思います。

お礼

ご回答どうもです。
&emsp;というのは初めて聞きました。
でも今回は使えそうにありません。

全角スペースにしたのはレイアウトを
均一にしようとした向こう側の判断です。
widthで解決できるみたいですから、
そちらで対処したいと思います。