如何使用CSS将表格列中的右对齐数字居中？

Question

下图说明了我正在努力实现的目标：

UPD。 如你所见，我需要在其单元格中居中最长的数字，并且所有其他数字要与最长数字的右边界对齐。

UPD 2.数字是动态的（最初未知）。

Answer 1

似乎没有任何直接的CSS方法。 但您可以在评论中考虑@CMKanode建议的方法。 您需要对列中的数字进行预处理并计算其中最大的数字（这需要区分大小写的解析，因为您使用的是千位分隔符），然后您可以使用U将数字左键填充到相同的字符数+2007将SPACE表示为与数字宽度相同的空格。 当然，该列将被声明为居中。

因此，在示例中，“5”将填充到        5 （假设您使用普通空间为数千分隔符; U + 2009 THIN SPACE可能更好，但它有字体问题。

该方法意味着您需要使用数字具有相同宽度的字体（计算机中的大多数字体）并且包含U + 2007。

例如，如果千位分隔符是逗号或句点，则需要使用U + 2008 PUNCTUATION SPACE。

最后，我认为这会过于复杂。 最好使列右对齐，但使用合适的左右填充，根据列标题的宽度和数字的预期宽度选择为一个很好的猜测。

Answer 2

下面不是一个理想的解决方案，因为数字的大小最初是未知的，但是如果没有太多额外的标签，它会更接近。

CSS：

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

HTML：

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

Answer 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;
}​

Answer 4

添加div到td：

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

然后添加填充/边距以微调div的位置。

Answer 5

你可以用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方法。

Answer 6

好的，我昨天遇到了这个问题，经历了所有的解决方案，并提出了我自己的解决方案，不会以显着的方式修改DOM但使用JS但我会列出上面一些解决方案的缺点

1. 如果您的字体是等宽字体，则填充额外字符有效
2. 创建固定填充或固定宽度可能会影响响应行为
3. 在列中添加第二个表是严格的DOM操作，如果你有1000行和30列，你将开始看到这么重的树的性能影响

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"
  }
}

快照

Answer 7

如果我理解正确，你需要这样的东西：

 .right-td { align:right; }

跟着去

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

Answer 8

我相信该table的实际td （如果它确实是一个表）将具有固定的宽度，并且有大量的填充以给出它中心右对齐的错觉。

你可以试试这样的原始风格：

/* 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>

Answer 9

要实现这种对齐，您应该执行以下操作：

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;
}

您只需调整宽度以满足您的要求，例如，数字中的最大数字。

Answer 10

另一种可能的解决方案是使用媒体查询。 在我们的例子中，每个表中的列数大致相同。 因此，只需根据屏幕大小更改正确的填充，即可获得所需的右/中心对齐：

@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;
      }
   }
}

Answer 11

在CSS中，执行此操作以居中对齐td

td {text-align:center;}