Html 如何右对齐表格单元格中心的数字？

给定一个包含数字的列的表，我想把它们放在中间

但是，我还想将数字右对齐

表格{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
文本对齐：居中；
}

数量
45
2.
18923538273
9823

在td css选择器中使

文本对齐：右

和

填充右：5em

表格{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
文本对齐：右对齐；
右侧填充：4em；
}

数量
45
2.
18923538273
9823

TL；医生：

表格{
边框：1px纯黑；
宽度：200px；
}
运输署{
文本对齐：右对齐；
最小宽度：10px；
}
td:第一个孩子，td:最后一个孩子{
宽度：50%；
}

。。。以及在现有列之前和之后添加额外列。jsFiddle

---

初步答复：

考虑到你的加价

td{
文本对齐：右对齐；
左边框：7rem实心透明；
右边框：7rem实心透明；
}

。。。我应该这样做

表格{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
文本对齐：右对齐；
左边框：7rem实心透明；
右边框：7rem实心透明；
}

数量
45
2.
18923538273
9823

桌子{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
文本对齐：居中；
浮动：对；
右边距：50px；
}

我在td中添加了float:right

---

将右边距值调整为所需的值

一个选项是将

td

元素的显示属性更改为

block

然后，您可以设置

max width

，将

td

元素置于

tr

元素的中心

完成后，将

td

元素的

text align

属性设置为

right

，使数字从右侧开始

表格{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
显示：块；
最大宽度：70%；
文本对齐：右对齐；
}

数量
45
2.
18923538273
9823

在

td

中用元素（

span

）包装数字，并在其上添加文本右对齐样式

表格{
边框：1px纯黑；
}
th{
宽度：200px；
}
运输署{
文本对齐：居中；
}
td跨度{
宽度：150px；
文本对齐：右对齐；
背景：米色；
显示：内联块；
}

数量
45
2.
18923538273
9823

根据问题编辑和一些评论进行更新

在你写的“在期望的结果中，随着数字的变化，单元格宽度保持不变（200px）”

你在信中写道：“……我的号码是链接，我希望它们占据整个单元格宽度”

考虑到这些要求，我能找到的唯一基于CSS的解决方案是，在使用

CSS表格

而不是

元素的情况下，锚定

a

元素显示为

表格行

，使整个宽度可以单击，而无需添加事件处理程序，并且对于居中，使用伪元素将数字压缩到中间

堆栈片段

.table{
显示：表格；
边框：1px纯黑；
}
.tr{
显示：表格行；
文字装饰：无；
颜色：黑色；
}
.tr span{
显示：表格单元格；
宽度：200px；
}
a、 tr{
文本对齐：右对齐；
}
.tr:：之前，.tr:：之后{
内容：''；
显示：表格单元格；
宽度：50%；
}

数量
数量

.table{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：300px；
背景色：红色；
弯曲方向：立柱；
}
div{
文本对齐：右对齐；
}

1.
1111111
1111111111111

这很有趣。您的解决方案唯一的问题是单元格宽度随数字而变化。在期望的结果中，单元格宽度随着数字的变化保持不变（200px）。正如答案中所添加的，您唯一的选择是在每个

中添加一个子元素，并控制其宽度和文本对齐方式。您能否演示您修改

内容（仅使用CSS）的想法？@MishaMoroshko。。。事实上，如果我们使用

边框

而不是

填充

，我认为它可以正常工作。更新…@Misha。更新答案。我想这就是你想要的。如果不是，我需要一个工作的例子来理解你的问题。你的解决方案的问题是它不是动态的。您必须根据涉及的数字对

最大宽度

值进行硬编码。在您的示例中，尝试将18923538273更改为0，您将看到

最大宽度：70%

不再那么好了。您的结果与期望的结果不同。您也可以为“td”添加200px。因为“th”已经有200px的宽度。我已经添加了示例值。您可以根据您的要求进行更改。请尝试理解逻辑。此解决方案不是动态的。这取决于数字。在您的解决方案中，表格单元格宽度不是固定的。请问您为什么删除了accept？我刚刚注意到您的更新，…但是每个

应该有一个数字，我想这就是您删除accept的原因。再加上你的一些评论，这几乎使我的答案无效

<style>
table {
border: 1px solid black;
}

th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>