How to properly align numbers enclosed in parentheses? [duplicate]

Question

This question already has answers here:

Align Decimal Data in table column by decimal point, HTML5, CSS3 (7 answers)

Closed 8 years ago.

I want to align positive numbers and negative numbers enclosed in parentheses using CSS to achieve the following result:

 431,000
 (26,000)
  94,000
 (57,000)

Using text-align:right; on table cells returns the following result instead:

 431,000
(26,000)
  94,000
(57,000)

But this is imperfect.

Is there an easy way to do this in such a way that parentheses have not effect on the alignment.

I want to align the numbers so that commas are on top of each other.

Thanks!!

Answer 1

Whatever language you choose, you need to test your string output to see if they are negative or positive. Add the brackets to the negatives and add a   to the end of your positives and still use your text-align: right; Use this if you are using a font where all characters are the exact width like a typewriter.

or add this for a perfect fit otherwise.

<span style="visibility: hidden;">)</span>

after, this is most likely better anyways.

Answer 2

Sounds like you want the commas to be aligned.

One simple solution using html would be to use a table, and align the left most column to the right and the right most column to the left. Collapse the table and remove padding to make it invisible.

HTML

<table>
    <tr><td class="left">431</td><td>,</td><td class="right">000</td></tr>
    <tr><td class="left">(26</td><td>,</td><td class="right">000)</td></tr>
    <tr><td class="left">94</td><td>,</td><td class="right">000</td></tr>
    <tr><td class="left">(57</td><td>,</td><td class="right">000)</td></tr>
</table>

CSS

table{border-collapse:collapse;}
td{padding:0;}
.left{text-align:right;}
.right{text-align:left;}