下图说明了我要完成的工作：
UPD。如您所见，我需要最长的数字在其单元格中居中，并且所有其他数字都与最长数字的右边框右对齐。
UPD 2. 数字是动态的（最初未知）。
【问题讨论】：
似乎没有任何直接的 CSS 方法。但是您可以在评论中考虑@CMKanode 建议的方法。您需要预处理列中的数字并计算其中最大的数字（这需要对区域设置敏感的解析，因为您使用的是千位分隔符），然后您将使用 U 将数字左填充到相同数量的字符+2007 图形空间作为与数字具有相同宽度的空间。当然，该列将被声明为居中。
因此，在示例中，“5”将被填充到         5（假设您使用普通空格作为千位分隔符；U+2009 THIN SPACE 可能更好，但存在字体问题。
该方法意味着您需要使用数字具有相同宽度的字体（计算机中的大多数字体都如此）并且包含 U+2007。
例如，如果千位分隔符是逗号或句点，则需要使用 U+2008 PUNCTUATION SPACE 来代替。
最后，我认为这会过于复杂。最好使列右对齐但具有合适的左右填充，根据列标题的宽度和数字的预期宽度选择作为一个很好的猜测。
【讨论】：
下面不是一个理想的解决方案，因为数字的大小最初是未知的，但是没有太多额外的标签，它会更接近一些。
CSS：
.numSpan {
display: inline-block;
width: 100px;
text-align: right;
}
td { text-align: center; }
HTML：
<td>
<span class="numSpan">5</span>
</td>
【讨论】：
width: calc(16% - 5em); 使其响应更快一些。这很简单，但它在每个窗口大小上都完全符合我的要求。
在我看来，您需要在主表内有第二个表来确定要居中但右对齐的编号内容的宽度。看看这个小提琴：Fiddle Example
示例代码：
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;
}
【讨论】：
好吧，我昨天遇到了这个问题，经过了所有的解决方案，并提出了我自己的解决方案，它不会以显着的方式修改 DOM，而是使用 JS，但我会列出上面一些解决方案的缺点
HTML（使用 Bootstrap 4.1.1）
<table class="table" id="datatable">
<thead>
<tr>
<th>#</th>
<th>Symbol</th>
<th>Price</th>
<th>Volume</th>
<th>Market Cap</th>
<th>Circulating Supply</th>
<th>Total Supply</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS
.numeric{
text-align: right;
}
#datatable th, #datatable td{
text-align: center;
}
.centerspan{
display: inline-block;
text-align: right;
background: yellow;
}
.root-rank, .root-price, .root-market_cap, .root-max_supply{
background: #efefef;
}
JavaScript
var overview_data = [
{ "rank": 1, "symbol": "BTC", "price": 8004.8, "volume_24h": 5864600000000.0, "market_cap": 137422500058.0, "circulating_supply": 17167512.0, "max_supply": 21000000.0},
{ "rank": 2, "symbol": "ETH", "price": 471.305, "volume_24h": 1930260000.0, "market_cap": 47547607782.0, "circulating_supply": 100885006.0, "max_supply": null},
{ "rank": 3, "symbol": "XRP", "price": 0.454852, "volume_24h": 234947000.0, "market_cap": 17882817260.0, "circulating_supply": 39315683476.0, "max_supply": 100000000000.0},
{ "rank": 4, "symbol": "Bitcoin Cash", "price": 845.04, "volume_24h": 730498000.0, "market_cap": 14580563109.0, "circulating_supply": 17254288.0, "max_supply": 21000000.0},
{ "rank": 5, "symbol": "EOS", "price": 8.14097, "volume_24h": 691908000.0, "market_cap": 7295526131.0, "circulating_supply": 896149492.0, "max_supply": 1000000000.0}
]
var table = document.getElementById("datatable")
var thead = table.tHead
var tbody = table.tBodies[0]
var colClasses = []
for(var i = 0, len= overview_data.length; i < len; i++){
var tr = document.createElement("tr")
for(var j in overview_data[i]){
var td = document.createElement("td")
td.classList.add("root-" + j)
var span = document.createElement("span")
span.classList.add("centerspan")
span.classList.add('col-' + j)
//Add this column classes to keep track of one class per column
if (!colClasses.includes("col-" + j)){
colClasses.push('col-' + j)
}
var text = document.createTextNode(overview_data[i][j] || -1)
if(!isNaN(overview_data[i][j])){
td.classList.add("numeric")
}
span.appendChild(text)
td.appendChild(span)
tr.appendChild(td)
}
tbody.appendChild(tr)
}
//This is the main part
for(var i = 0; i < colClasses.length; i++){
var items = document.querySelectorAll("." + colClasses[i])
var max = 0
//Loop through all the items in the col class
for(var j = 0; j < items.length; j++){
//Calculate max width of span containing text inside column
if(items[j].offsetWidth > max){
max = items[j].offsetWidth
}
}
//Set width of each span to the max width
for(var j = 0; j < items.length; j++){
console.log(max)
items[j].style.width = max + "px"
}
}
【讨论】：
给 td 添加一个 div：
<td>
<div align="center">
<p style="text-align:right">Text Aligned Right</p>
</div>
</td>
然后添加填充/边距来微调 div 的位置。
【讨论】：
你可以用 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 方法。
【讨论】：
如果我理解正确，你想要这样的东西：
.right-td { align:right; }
一起去
<td class="right-td">5000000</td>
【讨论】：
我相信实际的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>
【讨论】：
要实现这种对齐，您应该执行以下操作：
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;
}
您只需要调整宽度以满足您的要求，例如，数字中的最大位数。
【讨论】：
另一种可能的解决方案是使用媒体查询。在我们的例子中，每个表中的列数大致相同。因此，只需根据屏幕大小更改右侧填充以提供所需的右/中心对齐：
@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;
}
}
}
【讨论】：
在 CSS 中，这样做可以使 td 居中对齐
td {text-align:center;}
【讨论】：