CSS - Make numbers more uniform on the page-CodePudding

I have a list of numbers with the same digits in a table column, however, some of the numbers seem smaller due to the numbers used in the account number. Is there a way to make these more uniform on the page using CSS?

Current alignment: enter image description here

Expected alignment : enter image description here

CodePudding user response：

Use a monospaced font for numbers to get them aligned.

Here's a simple example:

.numbers {
  font-family: monospace;
}

<div >
  <a>00001111</a><br>
  <a>11111111</a><br>
  <a>01234567</a><br>
  <a>88888888</a><br>
</div>

CodePudding user response：

You can get max length of this column then for each this column cell, check cell number length and if cell length is less than max length, Concatenate max length - cell length zero to current cell