html – 如何正确对齐表格单元格中心的数字？

给定一个包含数字的列的表格,我想将它们放在中心位置.

但是,我也想对齐这些数字！

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}


输出：

期望的输出：

注意：无论数字如何,表格单元格宽度应保持不变(200px).例如,如果所有数字都为0,则它们都应位于表格的中心：

也：
>您可以修改< td>的内容,但每个< tr>应该有一个数字.
>请仅限CSS.


最佳答案
根据问题的编辑和一些评论进行更新
在a comment中你写了“在期望的结果中,单元格宽度保持不变(200px)随着数字的变化”.
在another comment你写了“……我的数字是链接,我希望它们占据整个单元格宽度”.
鉴于这些要求,我能找到的唯一基于CSS的解决方案是,使用CSS表而不是< table>元素,锚点显示为表格行的元素,使全宽度可点击而不添加事件处理程序,并且对于居中,使用伪元素将数字填入中间.
堆栈代码段

.table {
  display: table;
  border: 1px solid black;
}
.tr {
  display: table-row;
  text-decoration: none;
  color: black;
}
.tr span {
  display: table-cell;
  width: 200px;
}
a.tr {
  text-align: right;
}
.tr::before,.tr::after {
  content: '';
  display: table-cell;
  width: 50%;
}

_____________________________________________________________________________
这是我的第一个答案,我将离开,因为可能有人可以按原样使用它.
实现这一目标的一种简单方法是简单地为值嵌套表,使用自动边距对其进行居中,并右对齐其td的内容.
这样,您将获得与原始标记完全相同的行为,但可以更好地控制值对齐.
堆栈代码段

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

table table {
  border: none;
  margin: 0 auto;
}

table table td {
  text-align: right;
}

您当然可以使用div而不是表格,显示为内联块或内联flex列.
内联块

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

td > div {
  display: inline-block;
}

td > div > div {
  text-align: right;
}

内联柔性柱

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

td > div {
  display: inline-flex;
  flex-direction: column;
}

td > div > div {
  text-align: right;
}


版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html – 如何正确对齐表格单元格中心的数字？

相关推荐