CSS中的Currency表

Question

我有一个表，我需要格式化货币，以便.始终显示在另一个下面。

下表：

<table class="data" cellspacing="0" cellpadding="5" border="0">
    <thead>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Field1</th>
        <th>Field2</th>
        <th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr class="verticalDivider"></tr>
    <tr>
        <td>08 April 2010</td>
        <td>value 1</td>
        <td>GBP 20.00</td>
        <td>&nbsp;</td>
        <td>GBP 20.00</td>
    </tr>
    <tr>
        <td>08 May 2010</td>
        <td>value 2</td>
        <td>GBP 100.00</td>
        <td>&nbsp;</td>
        <td>GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td>&nbsp;</td>
        <td>GBP 50.00</td>
        <td>GBP 970.00</td>
    </tr>
    </tbody>
</table>

我如何才能做到这一点？

Answer 1

这看起来怎么样？

<style type="text/css">
    .price {
        text-align: right;
    }
</style>

<table class="data" cellspacing="0" cellpadding="5" border="0">
    <thead>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Field1</th>
        <th>Field2</th>
        <th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr class="verticalDivider"></tr>
    <tr>
        <td>08 April 2010</td>
        <td>value 1</td>
        <td class="price">GBP 20.00</td>
        <td>&nbsp;</td>
        <td class="price">GBP 20.00</td>
    </tr>
    <tr>
        <td>08 May 2010</td>
        <td>value 2</td>
        <td class="price">GBP 100.00</td>
        <td>&nbsp;</td>
        <td class="price">GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td>&nbsp;</td>
        <td class="price">GBP 50.00</td>
        <td class="price">GBP 970.00</td>
    </tr>
    </tbody>
</table>

Answer 2

假设您总是打印2位十进制数字，我将定义所有表对齐，然后将<col /> -<col />：右赋值给包含价格的cols (以及从边框创建空格的右填充)

否则，如http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2中所指定的，您可以将align="char" char="."分配给表cols (如果您的浏览器支持它)

Answer 3

要使货币符号(GBP)和点对齐，您可以执行以下操作(在Chrome和Firefox上测试，在IE上中断)：

CSS文件：

...
td.money {
    text-align: right;
}

.currencySymbol {
    float: left;
}
...

您的表格单元格将如下所示：

<td class="money">
    <div class="currencySymbol">GBP</div>
    970.00
</td>

尽管它很危险(可能就是它在IE上崩溃的原因)，但请参阅：Is a DIV inside a TD a bad idea?