CSS for Excel Accounting Format?

Question

I am working with a data table in Visualforce, and I am trying to get the columns with currency values to format similarly to how the account format looks in Excel, where it will align the dollar signs and decimals properly.

I have tried a whole bunch of different options but haven't had any luck. If someone knows of a JavaScript or CSS style class that can achieve this, please let me know!

Answer 1

You can place the currency symbol in the first column, and then you can display the currency value (without the currency symbol) in the second column.

The last step would be to remove the border between the two columns and align the text in the second column to the right.

Example:

<apex:page id="example" standardController="PricebookEntry" extensions="Example">
    <style>
    [id="example:price-table"] {
        border-collapse: collapse;
        font-size: 10pt;
    }

    [id="example:price-table"] td {
        border: 1px solid #dadcdd;
    }

    [id^="example:price-table"][id$="currency-symbol"] {
        border-right: 0;
    }

    [id^="example:price-table"][id$="currency-amount"] {
        border-left: 0;
        text-align: right;
    }
    </style>
    <apex:dataTable id="price-table" value="{!prices}" var="price">
        <apex:column id="currency-symbol">$</apex:column>
        <apex:column id="currency-amount">
            <apex:outputText value="{0, Number, #,###.00}">
                <apex:param value="{!price.UnitPrice}" />
            </apex:outputText>
        </apex:column>
    </apex:dataTable>
</apex:page>

Result: