下图说明了我要完成的工作：
UPD。如您所见，我需要最长的数字在其单元格中居中，并且所有其他数字都与最长数字的右边框右对齐。
UPD 2. 这些数字是动态的（最初未知）。
问问题
23816 次
11 回答
11
似乎没有任何直接的 CSS 方法。但是您可以在评论中考虑@CMKanode 建议的方法。您需要预处理列中的数字并计算其中最大的数字（这需要对区域设置敏感的解析，因为您使用的是千位分隔符），然后您将使用 U 将数字左填充到相同数量的字符+2007 图形空间作为与数字具有相同宽度的空间。而且，当然，该列将被声明为居中。
因此，在示例中，“5”将被填充        5（假设您使用普通空格作为千位分隔符；U+2009 THIN SPACE 可能会更好，但它存在字体问题。
该方法意味着您需要使用数字具有相同宽度的字体（计算机中的大多数字体都如此）并且包含 U+2007。
例如，如果千位分隔符是逗号或句点，则需要使用 U+2008 PUNCTUATION SPACE 来代替。
最后，我认为这会过于复杂。最好使列右对齐但具有合适的左右填充，根据列标题的宽度和数字的预期宽度选择作为一个很好的猜测。
于 2012-12-21T15:14:35.893 回答
10
下面不是一个理想的解决方案，因为数字的大小最初是未知的，但在没有太多附加标签的情况下它更接近一些。
CSS：
.numSpan {
display: inline-block;
width: 100px;
text-align: right;
}
td { text-align: center; }
HTML：
<td>
<span class="numSpan">5</span>
</td>
于 2012-12-21T15:04:00.557 回答
4
在我看来，您需要在主表内有第二个表来确定要居中但右对齐的编号内容的宽度。签出这个小提琴：小提琴示例
示例代码：
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;
}
于 2012-12-21T14:59:52.560 回答
2
好的，我昨天遇到了这个问题，经历了所有的解决方案，并提出了我自己的解决方案，它不会以显着的方式修改 DOM，而是使用 JS，但我将列出上面一些解决方案的缺点
- 如果您的字体是等宽字体，则填充额外字符有效
- 创建固定填充或固定宽度可能会影响响应行为
- 在列中添加第二个表是严重的 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"
}
}
快照
于 2018-07-25T04:39:10.037 回答
1
给 td 添加一个 div：
<td>
<div align="center">
<p style="text-align:right">Text Aligned Right</p>
</div>
</td>
然后添加填充/边距以微调 div 的位置。
于 2012-12-21T14:41:55.100 回答
1
你可以用 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 方法。
于 2017-09-14T17:11:07.140 回答
0
如果我理解正确，你想要类似的东西：
.right-td { align:right; }
一起去
<td class="right-td">5000000</td>
于 2012-12-21T14:40:58.920 回答
0
我相信实际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>
于 2012-12-21T14:42:22.633 回答
0
要实现这种对齐，您应该执行以下操作：
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;
}
您只需要调整宽度以满足您的要求，例如，数字中的最大位数。
于 2012-12-21T14:45:02.000 回答
0
另一种可能的解决方案是使用媒体查询。在我们的例子中，每个表中的列数大致相同。因此，只需根据屏幕大小更改右填充以提供所需的右/中心对齐：
@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;
}
}
}
于 2017-08-15T21:01:18.230 回答
-7
在 CSS 中，这样做可以使 td 居中对齐
td {text-align:center;}
于 2012-12-21T14:38:25.870 回答