CSS 中的货币表

发布于 2024-10-02 17:45:33 字数 1262 浏览 2 评论 0原文

我有一个表格，我需要设置货币格式，以便 . 始终显示在彼此下方。

下表是：

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

我怎样才能实现这一目标？

原文

I have a table and I need to format the currency in order for the . to be displayed always under each other.

This is the table:

<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> </td>
        <td>GBP 20.00</td>
    </tr>
    <tr>
        <td>08 May 2010</td>
        <td>value 2</td>
        <td>GBP 100.00</td>
        <td> </td>
        <td>GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td> </td>
        <td>GBP 50.00</td>
        <td>GBP 970.00</td>
    </tr>
    </tbody>
</table>

How can I achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

臻嫒无言 2024-10-09 17:45:34

这看起来怎么样？

<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> </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> </td>
        <td class="price">GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td> </td>
        <td class="price">GBP 50.00</td>
        <td class="price">GBP 970.00</td>
    </tr>
    </tbody>
</table>

How does this look?

<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> </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> </td>
        <td class="price">GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td> </td>
        <td class="price">GBP 50.00</td>
        <td class="price">GBP 970.00</td>
    </tr>
    </tbody>
</table>

回复收藏 0 原文

独行侠 2024-10-09 17:45:34

假设您总是打印 2 位十进制数字，我将定义所有表格然后我将 text-align : right 分配给包含价格的列（以及 padding-right从边框创建空间），

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

回复收藏 0 原文

A君 2024-10-09 17:45:34

要使货币符号 (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 上），请参阅： TD 内的 DIV 是否不好想法？

To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):

CSS file:

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

.currencySymbol {
    float: left;
}
...

And your table cell would look like:

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

Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?

回复收藏 0 原文

西瓜 2024-10-09 17:45:34

 <td align="right">GBP 20.00</td>
 <td align="right">GBP 100.00</td>
 <td align="right"> </td>

我猜这就是你正在寻找的，只要你是“.00”。如果我是你，即使是这段需要编辑 3 个位置而不是一个位置的代码，我也会开始使用 css。

 <td align="right">GBP 20.00</td>
 <td align="right">GBP 100.00</td>
 <td align="right"> </td>

I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.

回复收藏 0 原文

~没有更多了~