我经常使用包含必须右对齐的数字的表格，以便将数字/数十/数百/千位数中的数字对齐。像这样：
2,343
1,000,000
43
43,394
232,111
这些表中的列标题居中。当表格列很宽时，它看起来不太好：
Column 1 Column 2
===========================|===========================
2,343 | 32
43 | 44,432
12,243,394 | 23
232,111 | 4,432
有没有办法使用javascript，jQuery或CSS来根据最大的数字来居中数字，但保持正确的理由？期望的最终结果如下：
Column 1 Column 2
===========================|===========================
2,343 | 32
43 | 44,432
12,243,394 | 23
232,111 | 4,432
我知道我可以全局设置td填充，但我正在寻找一种能够适应不同表格的动态解决方案，即使是不同的列宽和数字宽度。
可以这样做吗？
答案 0 :(得分：3)
对于要对齐“居中右侧”的数字列，请使用三列，其中左列和右列设置为50％。
数字放在中间栏中。由于没有为此列设置宽度，因此它会获得尽可能小的宽度，即最宽的宽度。该宽度取自左右列的相等部分。
HTML：
<table>
<colgroup><col width="50%"><col><col width="50%"></colgroup>
<thead style="text-align:center;">
<tr><td colspan="3"> /* any optional head line */ </td></tr>
</thead>
<tbody style="text-align:right;">
<tr><td></td><td>123,456,789</td><td></td></tr>
<tr><td></td><td>456,789</td><td></td></tr>
<tr><td></td><td>789</td><td></td></tr>
</tbody>
</table>
只要列中的所有数字具有相同的小数位数，它就可以正常工作。如果需要，您可以使用左列对齐标记，使用右列显示脚注（左对齐）而不会干扰对齐。
对于多个数字列，请使用以下规则，其中n是数字列数，x_i是第i个数字列所需宽度的一半，总和（x_i）= 100：
<table>
<colgroup>
<col width="x_i %"><col><col width="x_i %"> // for each number column
</colgroup>
<thead style="text-align:center;">
<tr><td colspan="3*n"> /* table head line */ </td></tr>
<tr><td colspan="3"> /* column head line */ </td></tr> // for each number column
</thead>
<tbody style="text-align:right;">
<tr>
<td></td><td> /* number */ </td><td></td> // for each number column
</tr>
</tbody>
</table>
答案 1 :(得分：1)
显而易见的技巧是使用额外的表格单元格。即。
Column 1 Column 2
===========================|===========================
. 2,343 . | . 32 .
. 43 . | . 44,432 .
. 12,243,394 . | . 23 .
. 232,111 . | . 4,432 .
.指示具有自动宽度的不可见表格边框。
答案 2 :(得分：1)
我会提供一个不同的答案，而不是更改标记以满足您的需求：
使用jQuery的width（）函数并遍历列标题，检查/存储它们的宽度。然后添加预定义的类（使用填充）或更改列中每个单元格的TD填充。
有些事情如下：
jQuery("thead td").each(function(columnIndex)
{
var width=jQuery(this).width();
jQuery(":not(thead) > tr").each(function()
{
jQuery(this).find("td").eq(columnIndex).css("padding-right",width/2);
});
});
查看实际操作：http://jsfiddle.net/Y5rw4/3/
答案 3 :(得分：0)
好吧，我经历了一些答案，发现很难接受添加额外列的想法，这些列完全没有用处。我将建议一个更好的方法，包括在每个字符的开头添加非中断空格，并在不添加额外列的情况下对齐所有内容 使用下面的函数在开始时使用额外的字符序列填充字符串
function padString(pad, str, leftPadded) {
if (str === undefined) return pad;
if (leftPadded) {
return (pad + str).slice(-pad.length);
} else {
return (str + pad).substring(0, pad.length);
}
}
var coin, newRow, newCell, value, newText
var spaces = new Array(4).fill('\u00A0').join('')
for(let i = 0; i < 1400; i++){
// Insert a row in the table at row index 0
newRow = tbody.insertRow(i);
// Insert a cell in the row at index 0
newCell = newRow.insertCell(0);
newCell.className = 'rank'
value = padString(spaces,''+ (i + 1) ,true)
// Append a text node to the cell
newText = document.createTextNode(value);
newCell.appendChild(newText);
}
所有列都居中对齐，但每个项目前面都有额外的非破坏空间，它们都变为中心右对齐
答案 4 :(得分：0)
您可以将 td 文字打包成 <span> ，然后找到 max-width 使用 Math.max.apply(null, Array) 并将一些css规则应用到跨度中，如下所示
$("td").wrapInner("<span></span>");
var arr = [];
var columns = $("table").find("tr")[0].cells.length;
var rows = $("table").find("tr").length - 1;
for (i = 0; i < columns; i++) {
for (j = 1; j <= rows; j++) {
arr.push($('table tr:eq("' + j + '") td:eq("' + i + '") span').outerWidth());
}
//console.log(arr);
//console.log(Math.max.apply(null, arr));
$('table tr').find('td:eq("' + i + '") span').css('width', Math.max.apply(null, arr))
arr = [];
}body {
font: 14px Monospace;
}
table {
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #cccccc;
padding: 6px;
}
td span {
display: inline-block;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>2,343</td>
<td>32</td>
</tr>
<tr>
<td>43</td>
<td>44,432</td>
</tr>
<tr>
<td>12,243,394</td>
<td>23</td>
</tr>
<tr>
<td>232,111</td>
<td>4,432</td>
</tr>
</table>