After incorporating an edit to the original question and some feedback
In a comment, you mentioned "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment, you stated "...my numbers are links and I want them to occupy the full cell width".
To meet these requirements, one possible CSS solution involves using a CSS Table instead of traditional <table> elements. By setting the anchor element (a) to be displayed as table-row, the full width can be made clickable without additional event handlers. Pseudo elements can then be used for centering.
Example:
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
...
_____________________________________________________________________________
This is my initial answer, which may still be helpful to someone.
An alternative method to achieve the desired layout is by nesting a table within another table for values alignment control.
Example:
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
...
You could also opt to use div elements styled as inline blocks or inline flex columns.
Inline block example:
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
...
...
Inline flex column example:
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
...
...