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

Question

给定一个包含数字列的表格，我希望将它们放在中心位置。

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

＆＃13;

＆＃13;

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

td {
  text-align: center;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

输出：

期望的输出：

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

另外：

• 您可以修改<td>的内容，但每个<tr>应该有一个数字。
• 仅限CSS。

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

......应该这样做。

＆＃13;

＆＃13;

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

经过大量的尝试，我发现唯一可靠的解决方案（暗示标记修改而没有JavaScript），是在表格中添加其他列，依靠表格排列所有单元格的能力一栏。

我更新了下面的代码段，以便根据最宽的数字占据最小必要宽度，并根据生成的宽度右对齐所有单元格。这意味着当所有值都为0时，整行值都居中。这是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据问题的修改和一些评论进行了更新

在a comment中你写了“在期望的结果中，单元格宽度保持不变（200px），因为数字会改变”。

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

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

Stack snippet

.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的内容。

通过这种方式，您将获得与原始标记完全相同的行为，但可以更好地控制值对齐。

Stack snippet

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，显示为内联块或内联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>
  <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>

Answer 3

在td css选择器中生成text-align:right和padding-right:5em

＆＃13;

＆＃13;

table {
  border: 1px solid black;
}

th {
  width: 200px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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 将保证金权利值调整为您想要的值;

Answer 5

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

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

完成后，您为text-align元素的right属性设置为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>

Answer 6

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

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