Как выровнять и дистанцировать значения td

Question

Моя таблица HTML похожа на эту:

<table>
  <tr>
    <td>123 - 20 - 20</td>
  </tr>
</table>

Значения извлекаются из базы данных и отображаются в виде этого изображения: https://imgur.com/g7tG2yr

Как получить все значения (всецифры) хорошо выровнены?Спасибо

Answer 1

Лучше всего отформатировать каждую «подстроку» (каждый номер и оператора) как отдельную ячейку таблицы и применить text-align: center к каждой ячейке. Это сохранит все выравнивание по центру, независимо от того, сколько цифр имеет номер.

td {
  text-align: center;
}

<table>
  <tr>
    <td>27.082</td>
    <td> - </td>
    <td>5</td>
    <td> - </td>
    <td>5</td>
  </tr>
  <tr>
    <td>3.905</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>2</td>
  </tr>
  <tr>
    <td>13.602</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td> - </td>
    <td>0</td>
    <td> - </td>
    <td>1</td>
  </tr>
  <tr>
    <td>43715</td>
    <td> - </td>
    <td>513</td>
    <td> - </td>
    <td>312</td>
  </tr>
</table>

Имея много цифр, вы можете видеть, что все по-прежнему остается выровненным:

td {
  text-align: center;
}

<table>
  <tr>
    <td>27.082</td>
    <td> - </td>
    <td>5</td>
    <td> - </td>
    <td>5</td>
  </tr>
  <tr>
    <td>3.905</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>2</td>
  </tr>
  <tr>
    <td>13.602</td>
    <td> - </td>
    <td>2</td>
    <td> - </td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td> - </td>
    <td>0</td>
    <td> - </td>
    <td>1</td>
  </tr>
  <tr>
    <td>43750311251242145</td>
    <td> - </td>
    <td>5313451413</td>
    <td> - </td>
    <td>31434132</td>
  </tr>
</table>