Tableau des devises en CSS

Question

J'ai un tableau et je dois formater la devise afin que le . s'affiche toujours sous l'autre.

Voici le tableau:

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

Comment puis-je y parvenir?

Answer 1

Comment cela ressemble-t-il?

<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

en supposant que vous aurez toujours l'impression 2 chiffres décimaux, je définirais tout ma table <col /> alors j'assigner text-align: droit à ce que contiennent les prix Col. (et padding-right pour créer un espace de la frontière)

autrement comme spécifié dans http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 vous pouvez assigner align="char" char="." à la table Col. (si vous le soutien du navigateur, il)

Answer 3

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

Je suppose que c'est ce que vous cherchez aussi longtemps que toi est » .00" . Si j'étais vous, je commencerais à utiliser css même pour ce morceau de code où vous devez éditer 3 endroits au lieu d'un.

Answer 4

Pour avoir le symbole monétaire (GBP) et les points alignés, vous pouvez effectuer les opérations suivantes (testé sur Chrome et Firefox, les pauses sur IE):

fichier CSS:

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

.currencySymbol { 
    float: left; 
} 
... 

et votre cellule de table ressemblerait à ceci:

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

Bien qu'il soit dangereux (probablement la raison pour laquelle il se casse sur I E), voir: Is a DIV inside a TD a bad idea?