Aligning currency values in table

Question

I have a currency values for example:

4.50€, 25.30€, 446,60€

I set the td text-align property to right

  4.50€
 25.30€
446.60€

The only problem now is that all my content now starts from the right side of the td.

What i would like to achieve is right text formatting starting from the left side.

Something like that:

id     |money     |
-------------------
0      |  4.50€   |
1      | 25.30€   |
2      |446.60€   |

Not a duplicate. This is not about alignment really but about getting some spacing. (The question mentions how the desired alignment has been achieved.) — Jukka K. Korpela, Jun 15 '14 at 20:29
How is the width of the column set? This greatly affects the suitability of different approaches. — Jukka K. Korpela, Jun 15 '14 at 20:31

score 0 · Answer 1 · answered Jun 15 '14 at 20:07

If your contents are static then you can try the following:-

 <style>
        td, th{
            border: 1px solid #777;
        }
        td{
            width: 100px;
        }
        td div{
            width: 42%;
            text-align: right;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>
                SL No.
            </th>
            <th>
                Price
            </th>
        </tr>
        <tr>
            <td>
                1
            </td>
            <td>
                <div>4.2</div>
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                <div>4.22</div>
            </td>
        </tr>
        <tr>
            <td>
                1
            </td>
            <td>
                <div>4.222</div>
            </td>
        </tr>
    </table>
</body>

But I know, if the content is dynamic it'll not solve the problem completely.

Aligning currency values in table

1 Answers1