如何在表格單元格的中心右對齊數字？

Question

給定一個包含數字的列的表格，我想將它們放在中間。

但是，我也想右對齊數字！

 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>

輸出：

期望的輸出：

注意：無論數字如何，表格單元格寬度都應保持不變（200 像素）。 例如，如果所有數字都是 0，則它們都應位於表格的中心：

還有：

• 您可以修改<td>的內容，但每個<tr>應該有一個數字。
• 請僅使用 CSS。

Answer 1

特爾；博士：

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>內添加內部元素，給它們比 <td>更小的寬度，並右對齊它們的文本）。 您可以通過修改 HTML 源代碼或使用 JavaScript 即時完成此操作。

---

經過多次嘗試，我找到的唯一可靠解決方案（暗示修改標記而不使用 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>

Answer 2

根據對問題的編輯和一些評論進行更新

在您寫的評論中“在所需的結果中，單元格寬度隨着數字的變化保持不變（200px）” 。

在另一條評論中，您寫道“...我的數字是鏈接，我希望它們占據整個單元格寬度” 。

鑒於這些要求，僅基於CSS的解決方案，我能找到的是，其中一個使用CSS Table代替<table>元素，錨a元素顯示為table-row ，使得全寬度可點擊而不添加的事件處理程序，並為居中，使用偽元素將數字放到中間。

堆棧片段

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

這樣，您將獲得與原始標記幾乎完全相同的行為，但可以更好地控制值對齊。

堆棧片段

 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

 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>

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 將 margin-right 值調整為您想要的值；

Answer 5

一種選擇是將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>

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

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>

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