如何使用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;}