Question

下图说明了我想要完成的任务：

enter image description here

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

在我看来，您需要在主表中设置第二个表来确定要居中但右对齐的编号内容的宽度。看看这个小提琴：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;
}

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

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

 .right-td { align:right; }

跟着

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

Answer 7

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

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

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

要实现这种对齐，你应该这样做：

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 9

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

@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 10

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

Padding extra characters works if your font is monospace
Creating a fixed padding or fixed width may affect responsive behavior
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)

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

Snapshot

Answer 11

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

td {text-align:center;}

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

11 个答案: