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

假设你总是打印2个十进制数字，我会定义我的所有表<col />然后我将text-align：right分配给包含价格的cols（和padding-right从边界创建空间））

否则在http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2中指定，您可以将align="char" char="."分配给表格列表（如果您支持浏览器）

Answer 2

这看起来如何？

<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 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?

Answer 4

 <td align="right">GBP 20.00</td>
 <td align="right">GBP 100.00</td>
 <td align="right">&nbsp;</td>

只要有“.00”，我猜你正在寻找的东西。如果我是你，我会开始使用css，即使是你需要编辑3个地方而不是一个地方的代码。

CSS中的货币表

4 个答案: