给定一个包含数字的列的表格,我想将它们放在中心位置.
但是,我也想对齐这些数字！
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}输出：
期望的输出：
注意：无论数字如何,表格单元格宽度应保持不变(200px).例如,如果所有数字都为0,则它们都应位于表格的中心：
也：
最佳答案
根据问题的编辑和一些评论进行更新
在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;
}
原文链接：https://www.f2er.com/html/425617.html