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

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

Это таблица:

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

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


css formatting html-table
person seedg    schedule 16.11.2010    source источник
comment
Этот подключаемый модуль jQuery упрощает эту задачу: github.com/ndp/align-column.   -  person ndp    schedule 12.02.2013

Ответы (4)


arrow_upward
2
arrow_downward

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

<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>
person Roger    schedule 16.11.2010
comment
очевидно, я бы поместил css вверху в отдельную таблицу стилей. - person Roger; 16.11.2010
comment
мне нужно было выровнять слово GBP друг под другом, а также десятичные дроби друг под другом. Мне удалось это сделать с помощью вложенных таблиц, но оно того не стоило, поэтому вместо этого я использовал правильное выравнивание. - person seedg; 16.11.2010

arrow_upward
2
arrow_downward

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

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

person Community    schedule 16.11.2010

arrow_upward
1
arrow_downward

Чтобы выровнять символ валюты (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 - плохая идея?

person Sergio    schedule 23.05.2011

arrow_upward
0
arrow_downward 

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

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

person loxxy    schedule 16.11.2010
comment
Просто примечание: это недопустимо для XHTML/HTML5. - person Ricardo Souza; 09.07.2012