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

概述给定一个包含数字的列的表格,我想将它们放在中心位置.但是,我也想对齐这些数字！table { border: 1px solid black; } th { width: 200px; } td { text-align: center; }<table> <thead> <tr>

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

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

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;}
          总结       
以上是内存溢出为你收集整理的html  – 如何正确对齐表格单元格中心的数字？全部内容，希望文章能够帮你解决html  – 如何正确对齐表格单元格中心的数字？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119300.html