How to center right-aligned numbers in table column using CSS?

Question

The picture below illustrates what I\'m trying to accomplish:

UPD. As you

Answer 1

Ok I encountered this problem yesterday , went through all the solutions and came up with my own solution that does not modify the DOM in a significant manner but uses JS but I will list the drawbacks of some of the solutions above

1. Padding extra characters works if your font is monospace
2. Creating a fixed padding or fixed width may affect responsive behavior
3. Adding a second table inside column is serious DOM manipulation, if you have a 1000 rows and 30 columns, you will start seeing the effects of performance with such a heavy tree

HTML (Using Bootstrap 4.1.1)

  

    

      
#
      
Symbol
      
Price
      
Volume
      
Market Cap
      
Circulating Supply
      
Total Supply
    
  
  

  

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

Snapshot