CSSでテーブル内の数字を中寄せにしつつ、桁揃えのため右揃えにしたい

cssでテーブルのセル内の文字を中央寄せにしたいです。ただ中央寄せならできるのですが、数字の場合は右寄せにして桁を揃えたいです。私が書いたソースだと次の画像のとおりに表示されます。
※th（ヘッダー）の文字数が違うため、td要素は可変幅
※tdにwidthは指定したくない

コメントアウトのwidth: 30px;を解除すれば中央寄せになりますが、数字は左揃えになってしまいます。どうすればよいでしょうか？ご回答よろしくお願い致します。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <style>
7    table {
8      width: 500px;
9    }
10    table, td {
11      border: 1px solid black;
12    }
13    #target td > span {
14      /* width: 30px; */
15      margin: 0 auto;
16      display: block;
17      text-align: right;
18    }
19  </style>
20</head>
21<body>
22  <table id="target">
23    <tr>
24      <td>hoo</td>
25      <td><span>12345</span></td>
26    </tr>
27    <tr>
28      <td>bar</td>
29      <td><span>123</span></td>
30    </tr>
31  </table>
32</body>
33</html>

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

回答5件

何らかの方法でspanの幅を統一しないと末尾は揃わないと思いますので
もし数字の桁の限界値が決まってるなら

CSS
1    #target td > span {
2      display: block;
3      margin: 0 auto;
4      width:3em;
5      text-align: right;
6    }

※これだと半角で6桁越えた数値があるとずれます。
プログラムで出力してるなら最大桁数にあわせてwidthを調整するとか？

またはaKusanoさんと同じですが、固定でなくても割合で右側を空ける等

CSS
1    #target td > span {
2      padding-right:20%;
3      display: block;
4      text-align: right;
5    }

テーブルのセルは常に20%以上幅に余裕があること前提になります。

投稿2015/09/17 02:31

hirohiro

総合スコア2068

mitsuru793

2015/09/17 03:07 編集

2つ目の方法だと中央寄せになりませんが、1つ目の方法はうまくいきました。数字の桁数+1をem単位で幅として指定すればいいのですね。完璧に中央とまではいかないですが、中央よりになっています。これならjavascirpt側でも制御しやすいです。ご回答頂き、ありがとうございました。

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

ベストアンサー

CSSだけで、という解決策ではないですが、visibility:hiddenで「123」の前に「ゼロ2つ分の空白」を入れて幅を合わせてみる、のも1つの手段かなと思いました。

投稿2015/09/17 02:04

maisumakun

総合スコア146543

mitsuru793

2015/09/17 03:10

cssではありませんが、これが一番中央寄せになっていました！足りない桁数の2倍、 を入れれば大丈夫でした。ご回答頂き、ありがとうございました。

takito

2015/09/17 03:20

コメント失礼しますプロポーショナルフォントだと右揃えがうまくいかないと思ったのですが、大丈夫でしょうか？その点が気になったので空白等で揃えるのはナシかなと思ったのですが・・・

mitsuru793

2015/09/17 23:39 編集

> takitoさんご回答、ありがとうざいます。プロポーショナルフォントというのを初めて知りました。一文字ごとに固有の文字幅が設定されているフォントなのですね。クライアント側がこれを使用し、空白と数字の文字幅が違う場合は、その分ずれてしまいますね。これの対策にem指定は大丈夫なのかと思いましたが、emは1文字分を相対指定なのでどの文字が基準になるのかが不安要素です。

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

厳密に中寄にはならないですが、こういう形ではいかがでしょうか。

CSS
1#target td > span {
2  display: inline-block;
3  text-align: right;
4  width: 50px;
5}
6table, td {
7  border: 1px solid black;
8  text-align: center;
9}