Таблица валют в CSS - PullRequest
Новая
       20

Таблица валют в CSS

1 голос
/ 16 ноября 2010

У меня есть таблица, и мне нужно отформатировать валюту, чтобы . всегда отображалось друг под другом.

Это таблица: 

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

Какя могу достичь этого?

Ответы [ 4 ]

2 голосов
/ 16 ноября 2010

Как это выглядит? 

<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>
2 голосов
/ 16 ноября 2010

при условии, что вы всегда будете печатать 2 десятичных цифры, я бы определил всю мою таблицу <col />, затем я бы назначил text-align: прямо на те столбцы, которые содержат цены (и отступы-вправо, чтобы создать пространство от границы)

в противном случае, как указано в http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2, вы можете присвоить align="char" char="." столбцам таблицы (если ваш браузер поддерживает это)

1 голос
/ 23 мая 2011

Чтобы выровнять символ валюты (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), см .: Является ли DIV внутри TD плохой идеей?

0 голосов
/ 16 ноября 2010 
 <td align="right">GBP 20.00</td>
 <td align="right">GBP 100.00</td>
 <td align="right">&nbsp;</td>

Думаю, это то, что вы ищете, пока у вас есть ".00".На вашем месте я бы начал использовать css даже для этого фрагмента кода, где вам нужно отредактировать 3 места вместо одного.

...