Как центрировать выровненные по правому краю числа в столбце таблицы с помощью CSS?

На рисунке ниже показано, что я пытаюсь выполнить:

UPD. Как вы видите, мне нужно, чтобы наибольшее число было сосредоточено в его ячейке, а все остальные числа были выровнены по правому краю с самой длинной правой строкой.

UPD 2. Числа динамические (первоначально неизвестные).

Ответ 1

Нет никакого прямого метода CSS. Но вы можете рассмотреть подход, предложенный @CMKanode в комментарии. Вам нужно будет предварительно обработать числа в столбце и вычислить самый большой из них (для этого требуется зависящий от языка синтаксический анализ, так как вы используете разделитель тысяч), а затем вы оставите на клавиатуре числа с одинаковым количеством символов, используя U +2007 РИСУНОК ПРОСТРАНСТВА как пространство, которое имеет ту же ширину, что и цифры. И, конечно, столбец будет объявлен как центрированный.

Итак, в примере "5" будет дополнено к         5 (если вы используете обычное пространство в качестве разделителя тысяч, U + 2009 THIN SPACE может быть лучше, но оно имеет проблемы с шрифтом.

Подход означает, что вам нужно использовать шрифт, где цифры имеют одинаковую ширину (большинство шрифтов на компьютерах) и содержит U + 2007.

Если разделитель тысяч был запятой или периодом, например, вам нужно будет использовать U + 2008 PUNCTUATION SPACE.

В конце концов, я думаю, что это было бы слишком сложно. Вероятно, лучше сделать столбец выровненным по правому краю, но с подходящим левым и правым дополнением, выбранным как хорошее предположение, основанное на ширине заголовка столбца и ожидаемой ширине чисел.

Ответ 2

Ниже не идеальное решение, так как размер чисел изначально неизвестен, но он немного ближе без лишних дополнительных тегов.

CSS

.numSpan {
    display: inline-block;
    width: 100px;
    text-align: right;
}
td { text-align: center; }

HTML:

<td>
    <span class="numSpan">5</span>
</td>

Ответ 3

Мне кажется, что вам нужно иметь вторую таблицу внутри вашей основной таблицы, чтобы определить ширину нумерованного содержимого, которое будет центрировано, но выровнено по правому краю. Оформите эту скрипту: Пример скрипта

Пример кода:

HTML:

<table class="container">
    <tr><td class="title">Some Title for Numbers in a Table</td></tr>
    <tr><td>
        <table>
            <tr><td>5 000 000</td></tr>
            <tr><td>5 000</td></tr>
            <tr><td>5</td></tr>
            <tr><td>5 000 000</td></tr>
        </table>
   </td></tr>
</table>

CSS

.container {
    width: 400px;
    border: 1px solid #999;    
}

.title {
    font-weight: bold;
    text-align: center;    
}

.container table {
    margin: 0px auto;   
}

.container table td {
    text-align: right;
}

Ответ 4

Добавьте div в td:

<td>
    <div align="center">
        <p style="text-align:right">Text Aligned Right</p>
    </div>
</td>

Затем добавьте отступы/поля, чтобы точно настроить размещение div.

Ответ 5

Если я правильно понял, вам нужно что-то вроде:

 .right-td { align:right; }

<td class="right-td">5000000</td>

Ответ 6

Я считаю, что фактический td в том, что table (если это действительно таблица) будет иметь фиксированную ширину и множество отступов, чтобы создать иллюзию того, что он выравнивается по центру.

Вы можете попробовать грубый стиль, например:

/* For demonstration purposes, a fixed width `th`. */
th.headrowrnum {
    width: 200px;
}

td.rightalignnum {
    width: 100px;
    padding: 0 50px;
    text-align: right;
}

HTML:

<table>
    <tr>
        <th>Col 1</th>
        <th class="headrowrnum">Col 2</th>
    </tr>
    <tr>
        <td>X</td>
        <td class="rightalignnum">5</td>
    </tr>>
    <tr>
        <td>Y</td>
        <td class="rightalignnum">500</td>
    </tr>
</table>

Ответ 7

Чтобы достичь этого выравнивания, вы должны сделать что-то вроде этого:

HTML:

<td class="my_td">
    <div class="content">
        12345
    </div>
</td>

CSS

.my_td 
{
    width: 200px;
    align: center;
}

.content
{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

Вам просто нужно настроить ширину в соответствии с вашими требованиями, например, макс. цифры в числе.

Ответ 8

Другим возможным решением является использование медиа-запросов. В нашем случае мы имеем примерно одинаковое количество столбцов в каждой таблице. Итак, просто измените правильное дополнение на основе размера экрана, чтобы дать желаемое выравнивание вправо/в центре:

@media (min-width: 769px)
{
   td
   {
      &.financial
      {
         padding-right: 5px;
      }
   }
}

@media (min-width: 1100px)
{
   td
   {
      &.financial
      {
         padding-right: 20px;
      }
   }
}

@media (min-width: 1400px)
{
   td
   {
      &.financial
      {
         padding-right: 30px;
      }
   }
}

Ответ 9

Вы можете приблизиться к этому с помощью CSS. Создайте класс:

td.rt-ctr {
  text-align:right;
  padding-right:33%;    
}

Затем вызовите класс в диаграмме:

<table>
  <tbody>
   <tr>
    <td>Item 1</td>
    <td class="rt-ctr">100.25</td>
   </tr>
   <tr>
    <td>Item 2</td>
    <td class="rt-ctr">99.75</td>
   </tr>
  </tbody>
</table>

В зависимости от ширины столбца, диаграммы и самого длинного ввода данных вам может потребоваться отрегулировать процент в CSS. Этот подход не идеален, но он отзывчив и является чистым методом CSS.

Ответ 10

В CSS сделайте это для выравнивания по центру td

td {text-align:center;}