如何将数字右对齐在表格单元格中心？

Question

如何将数字右对齐在表格单元格中心？

8

给定一个包含数字的列的表格，我希望将它们居中对齐。但是，我也想将这些数字右对齐！

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>18923538273</td>
    </tr>
    <tr>
      <td>9823</td>
    </tr>
  </tbody>
</table>

输出:

期望的输出：

注意: 表格单元格宽度应该是固定的（200px），无论数字如何。例如，如果所有数字都为0，则它们应该位于表格中心：

另外：

您可以修改的内容，但每个只能有一个数字。
请使用纯CSS。

- Misha Moroshko

请问您为什么取消了您的采纳答案？ - Asons

我刚刚注意到你的更新，但是每个<tr>应该只有一个数字，我猜这就是你删除accept的原因。加上你的一些其他评论，这几乎使我的答案无效了...我正在进行更新，并将很快发布它。 - Asons

8个回答

2

TL;DR:

table {
  border: 1px solid black;
  width: 200px;
}
td {
  text-align: right;
  min-width: 10px;
}
td:first-child, td:last-child {
  width: 50%;
}

考虑到你的标记，

...

并在现有列之前和之后添加额外的列。jsFiddle这里。

初始回答：

考虑到你的标记，

td {
  text-align: right;
  border-left:7rem solid transparent;
  border-right:7rem solid transparent;
}

应该这样做。

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: right;
  border-left:7rem solid transparent;
  border-right:7rem solid transparent;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>18923538273</td>
    </tr>
    <tr>
      <td>9823</td>
    </tr>
  </tbody>
</table>

经过多次尝试，我发现唯一可靠的解决方案（需要标记修改而不需要JavaScript）是在表格中添加额外的列，依赖于表格将所有单元格对齐到列中的能力。

我更新了下面的代码片段，使该列占用最小必要宽度，基于最宽数字并根据结果宽度右对齐所有单元格。这意味着当所有值为0时，整行值将居中对齐。以下是代码片段：

table {
  border: 1px solid black;
  width: 200px;
}
td {
  text-align: right;
  min-width: 10px;
}
td:first-child, td:last-child {
  width: 50%;
}


/* just stacking tables side by side, not part of solution */
table {      
  float: left;
  width: 200px;
  margin-right: 7px;
}
body { overflow-y: hidden;}

<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>45</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>2</td><td></td>
    </tr>
    <tr>
      <td></td><td>0</td><td></td>
    </tr>
    <tr>
      <td></td><td>1234</td><td></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>2</td><td></td>
    </tr>
    <tr>
      <td></td><td>1</td><td></td>
    </tr>
    <tr>
      <td></td><td>4</td><td></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>44</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>0</td><td></td>
    </tr>
    <tr>
      <td></td><td>1155</td><td></td>
    </tr>
    <tr>
      <td></td><td>1234548775564</td><td></td>
    </tr>
  </tbody>
</table>

- tao

这很有趣。你的解决方案唯一的问题是单元格宽度随着数字的变化而改变。在期望的结果中，单元格宽度保持不变（200像素），即使数字发生变化。 - Misha Moroshko

正如答案中所添加的，您唯一的选择是向每个<td>添加一个子元素，并控制其宽度和文本对齐方式。 - tao

@MishaMoroshko... 实际上，如果我们使用border而不是padding，我认为它会按预期工作。正在更新... - tao

有趣的尝试 :) 现在问题是对齐取决于标题（单词“Amount”）。例如，尝试将所有数字更改为0。您会发现数字不再位于表格中间。 - Misha Moroshko

让我们在聊天中继续这个讨论。 - tao

显示剩余2条评论

0

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

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

我在td中添加了float:right，将margin-right的值调整为您所需的值；

- user7728122

此解决方案不是动态的。它依赖于数字。 - Misha Moroshko

0

        .table {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            background-color: red;
            flex-direction: column;
        }
        div {
            text-align: right;
        }

<body>
    <div class='table'>
        <div>
            <div>1</div>
            <div>1111111</div>
            <div>1111111111111</div>
        </div>
    </div>
</body>

- amazingthere

0

text-align: right ----> 将文本拉到右侧

padding-right: 50% 或 padding-left: 50% ----> 从右侧或左侧添加空间以居中对齐

使用45-49％的填充，根据您的要求使居中对齐更加清晰

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: right;
  padding-right: 50%;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>18923538273</td>
    </tr>
    <tr>
      <td>9823</td>
    </tr>
  </tbody>
</table>

- kavin Kumar

0

在 td 的 CSS 选择器中，使用 text-align:right 和 padding-right:5em。

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: right;
  padding-right: 4em;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>18923538273</td>
    </tr>
    <tr>
      <td>9823</td>
    </tr>
  </tbody>
</table>

- nkirit

1

在您的解决方案中，表格单元格的宽度没有固定。 - Misha Moroshko

0

一种选择是将 td 元素的显示属性更改为 block

然后，您可以设置一个 max-width 将 td 元素带到 tr 元素的中心。

完成后，您可以将 td 元素的 text-align 属性设置为 right，使数字从右侧开始。

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  display: block;
  max-width: 70%;
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>45</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>18923538273</td>
    </tr>
    <tr>
      <td>9823</td>
    </tr>
  </tbody>
</table>

- I haz kode

你的解决方案存在问题，它不够动态化。你必须根据涉及到的数字硬编码 max-width 值。试着将例子中的 18923538273 改为 0，你会发现 max-width: 70% 不再那么好用了。 - Misha Moroshko

0

将数字用元素(span)包裹在td内，并添加右对齐样式。

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

td span {
  width: 150px;
  text-align: right;
  background: beige;
  display: inline-block;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>45</span></td>
    </tr>
    <tr>
      <td><span>2</span></td>
    </tr>
    <tr>
      <td><span>18923538273</span></td>
    </tr>
    <tr>
      <td><span>9823</span></td>
    </tr>
  </tbody>
</table>

- sajee

你的结果与期望的结果不同。 - Misha Moroshko

您也可以为“td”添加200像素。因为“th”已经有了200像素的宽度。我已经添加了示例值。您可以根据需要进行更改。请尝试理解逻辑。 - sajee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

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

在评论中，您写道："在所需结果中，单元格宽度保持不变（200px），而数字会改变"。

在另一个评论中，您写道："...我的数字是链接，我希望它们占据整个单元格宽度"。

考虑到这些要求，我能找到的唯一基于CSS的解决方案是使用CSS表格而不是<table>元素，将锚点a元素显示为table-row，使整个宽度可点击而无需添加事件处理程序，并使用伪元素将数字推向中间以实现居中对齐。

Stack片段

.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%;
}

<div class="table">
  <div class="thead">
    <span class="tr">
      <span>Amount</span>
    </span>
  </div>
  <div class="tbody">
    <a href="#1" class="tr">
      <span>45</span>
    </a>
    <a href="#2" class="tr">
      <span>2</span>
    </a>
    <a href="#3" class="tr">
      <span>18923538273</span>
    </a>
    <a href="#4" class="tr">
      <span>9823</span>
    </a>
  </div>
</div>

<div class="table">
  <div class="thead">
    <span class="tr">
      <span>Amount</span>
    </span>
  </div>
  <div class="tbody">
    <a href="#1" class="tr">
      <span>0</span>
    </a>
    <a href="#2" class="tr">
      <span>0</span>
    </a>
    <a href="#3" class="tr">
      <span>0</span>
    </a>
    <a href="#4" class="tr">
      <span>0</span>
    </a>
  </div>
</div>

_____________________________________________________________________________

这是我的第一个答案，我会保留它，因为可能有人可以直接使用。

实现这个的一种简单方法是将值嵌套在一个 table 中，使用自动 margin 居中并右对齐其 td 的内容。

这样做，您将获得与原始标记几乎完全相同的行为，但更好地控制值的对齐。

堆栈片段

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

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

table table td {
  text-align: right;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table>
          <tr>
            <td>45</td>
          </tr>
          <tr>
            <td>2</td>
          </tr>
          <tr>
            <td>18923538273</td>
          </tr>
          <tr>
            <td>9823</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table>
          <tr>
            <td>0</td>
          </tr>
          <tr>
            <td>0</td>
          </tr>
          <tr>
            <td>0</td>
          </tr>
          <tr>
            <td>0</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

当然，您可以使用 div 替代 table，并将其显示为内联块或内联弹性列。

内联块

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

td > div {
  display: inline-block;
}

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

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <div>45</div>
          <div>2</div>
          <div>18923538273</div>
          <div>9823</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

内联弹性列

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;
}

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <div>45</div>
          <div>2</div>
          <div>18923538273</div>
          <div>9823</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
          <div>0</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>