html - CSSを使用してテーブル列の右揃えの数値を中央に配置するにはどうすればよいですか？

Question

下の写真は、私が達成しようとしていることを示しています。

UPD。ご覧のとおり、最も長い数字をセルの中央に配置し、他のすべての数字を最も長い数字の右端に揃える必要があります。

UPD 2.数値は動的です（最初は不明）。

Answer 1

直接の CSS メソッドはないようです。ただし、コメントで @CMKanode によって提案されたアプローチを検討できます。列内の数値を前処理し、それらの最大値を計算する必要があります (これには、桁区切り記号を使用しているため、ロケールに依存した解析が必要です)。次に、U を使用して、数値を同じ文字数まで左パディングします。 +2007 FIGURE SPACE 数字と同じ幅のスペースとして。そしてもちろん、列は中央に配置されていると宣言されます。

したがって、この例では、「5」がパディングされ        5ます (通常のスペースを 3 桁区切りとして使用すると仮定すると、U+2009 THIN SPACE の方が適切かもしれませんが、フォントの問題があります。

このアプローチは、数字が同じ幅 (コンピューターのほとんどのフォント) で、U+2007 を含むフォントを使用する必要があることを意味します。

たとえば、3 桁ごとの区切り記号がコンマまたはピリオドの場合、代わりに U+2008 PUNCTUATION SPACE を使用する必要があります。

結局、これは非常に複雑になると思います。列ヘッダーの幅と予想される数値の幅に基づいて適切な推測として選択された、適切な左右のパディングを使用して、列を右揃えにすることをお勧めします。

Answer 2

Below is not an ideal solution, since the size of the numbers are initially unknown, but it's a little closer without too much additional tags.

CSS:

.numSpan {
    display: inline-block;
    width: 100px;
    text-align: right;
}
td { text-align: center; }

HTML:

<td>
    <span class="numSpan">5</span>
</td>

Answer 3

番号付きコンテンツの幅を中央揃えで右揃えにするために、メイン テーブル内に 2 番目のテーブルを用意する必要があるように思えます。このフィドルをチェックしてください: Fiddle Example

コード例:

HTML:

<table class="container">
    <tr><td class="title">Some Title for Numbers in a Table</td></tr>
    <tr><td>
        <table>
            <tr><td>5 000 000</td></tr>
            <tr><td>5 000</td></tr>
            <tr><td>5</td></tr>
            <tr><td>5 000 000</td></tr>
        </table>
   </td></tr>
</table>​

CSS:

.container {
    width: 400px;
    border: 1px solid #999;    
}

.title {
    font-weight: bold;
    text-align: center;    
}

.container table {
    margin: 0px auto;   
}

.container table td {
    text-align: right;
}​

Answer 4

td に div を追加します。

<td>
    <div align="center">
        <p style="text-align:right">Text Aligned Right</p>
    </div>
</td>

次に、パディング/マージンを追加して、div の配置を微調整します。

Answer 5

私が正しく理解していれば、次のようなものが必要です。

 .right-td { align:right; }

一緒に行く

<td class="right-td">5000000</td>

Answer 6

その中の実際tdのものtable（実際にテーブルである場合）は幅が固定され、中央右揃えであるという錯覚を与えるために多くのパディングがあると思います。

次のような大雑把なスタイルを試すことができます。

/* For demonstration purposes, a fixed width `th`. */
th.headrowrnum {
    width: 200px;
}

td.rightalignnum {
    width: 100px;
    padding: 0 50px;
    text-align: right;
}

HTML:

<table>
    <tr>
        <th>Col 1</th>
        <th class="headrowrnum">Col 2</th>
    </tr>
    <tr>
        <td>X</td>
        <td class="rightalignnum">5</td>
    </tr>>
    <tr>
        <td>Y</td>
        <td class="rightalignnum">500</td>
    </tr>
</table>

Answer 7

そのアライメントを実現するには、次のようにする必要があります。

HTML:

<td class="my_td">
    <div class="content">
        12345
    </div>
</td>

CSS:

.my_td 
{
    width: 200px;
    align: center;
}

.content
{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

たとえば、数値の最大桁数など、要件を満たすように幅を調整するだけです。

Answer 8

CSS では、これを実行して td を中央揃えにします

td {text-align:center;}