如何在表格单元格的中心右对齐数字？答案

【问题标题】：How to right align numbers in the center of a table cell?如何在表格单元格的中心右对齐数字？
【发布时间】：2018-04-19 09:21:18
【问题描述】：

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

但是，我也想右对齐数字！

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，那么它们都应该在表格的中心：

还有：

<td>s的内容可以修改，但<tr>必须有一个数字。
请仅使用 CSS。

【问题讨论】：

请问您为什么删除了您的接受？
我刚刚注意到您的更新，...但是每个 <tr> 应该有一个数字，我想这就是您删除接受的原因。连同您的更多 cmets，这几乎使我的答案无效，...我正在进行更新，并将很快发布。

标签： html css html-table flexbox alignment

【解决方案1】：

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 here.

初步答案：

考虑到您的标记，

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>

任何其他解决方案都涉及更改标记（您需要在<td>s 中添加内部元素，使它们的宽度小于<td>，并使其文本右对齐）。您可以通过修改 HTML 源代码或即时使用 JavaScript 来实现。

经过大量尝试后，我发现唯一可靠的解决方案（暗示修改标记且不使用 JavaScript）是在表格中添加额外的列，这依赖于表格将列中的所有单元格对齐的能力。

我更新了下面的 sn-p，以便该列根据最宽的数字占据最小的必要宽度，并根据产生的宽度宽度右对齐所有单元格。这意味着当所有值都为 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>

【讨论】：

这很有趣。您的解决方案的唯一问题是单元格宽度随数字而变化。在期望的结果中，单元格宽度随着数字的变化保持不变（200 像素）。
正如答案中所添加的，您唯一的选择是为每个 <td> 添加一个子元素并控制其宽度和文本对齐方式。
您能否展示一下您修改<td> 内容的想法（仅使用CSS）？
@MishaMoroshko... 实际上，如果我们使用border 而不是padding，我认为它会按预期工作。更新中...
@Misha。更新了答案。我想这就是你想要的。如果没有，我需要一个工作示例来了解您的问题。

【解决方案2】：

根据对问题的编辑和一些 cmets 进行了更新

您在a comment 中写道“在所需的结果中，单元格宽度随着数字的变化保持不变（200 像素）”。

您在another comment 中写道“...我的数字是链接，我希望它们占据整个单元格宽度”。

鉴于这些要求，我能找到的唯一基于 CSS 的解决方案是，其中一个使用 CSS Table 而不是 <table> 元素，锚点 a 元素显示为 table-row，使整个宽度可点击而不添加事件处理程序，并且为了居中，使用伪元素将数字压到中间。

堆栈sn-p

.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，使用自动边距将其居中并右对齐其 td 的内容。

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

堆栈sn-p

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>

【讨论】：

【解决方案3】：

在 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>

【讨论】：

在您的解决方案中，表格单元格宽度不固定。

【解决方案4】：

<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 值调整为您想要的值；

【讨论】：

此解决方案不是动态的。这取决于数字。

【解决方案5】：

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

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

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

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>

【讨论】：

您的解决方案的问题在于它不是动态的。您必须根据所涉及的数字对 max-width 值进行硬编码。尝试在您的示例中将 18923538273 更改为 0，您会发现 max-width: 70% 不再那么棒了。

【解决方案6】：

在td 中用元素(span) 包裹您的数字，并在其上添加文本对齐样式。

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>

【讨论】：

您的结果与期望的结果不同。
您也可以为“td”添加 200 像素。因为 'th' 已经有 200px 的宽度。我已经添加了示例值。您可以根据自己的要求进行更改。请尝试理解其中的逻辑。

【解决方案7】：

        .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>

【讨论】：

【解决方案8】：

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>

【讨论】：