如何在 CSS 網格列中將一列右對齊的數字居中？

Question

我正在使用 CSS 網格來顯示數字數據表。 在給定的列中，我希望所有數字數據都右對齊但在為該列分配的空間內居中。 換句話說，它應該看起來像這樣。

我希望價格和折扣列具有相同的寬度，並且價格彼此右對齊，然后在列中居中。

這是我的第一次嘗試和結果。

HTML

<div class="product-table">
  <div class="first-column">Item</div>
  <div class="middle-column">Price</div>
  <div class="last-column">Discount</div>

  <div class="first-column">Widget A</div>
  <div class="middle-column">2.00</div>
  <div class="last-column">0.50</div>

  <div class="first-column">Widget B</div>
  <div class="middle-column">2,000.00</div>
  <div class="last-column">2.50</div>

  <div class="first-column">Widget C</div>
  <div class="middle-column">3,000,000.00</div>
  <div class="last-column">3,000.00</div>
</div>

CSS

.product-table {
  display: grid;
  grid-template-columns: 20% 1fr 1fr;
}

.first-column {
  background-color: lightcyan;
}

.middle-column {
  text-align: center;
  background-color: lightsalmon;
}

.last-column {
  text-align: right;
  background-color: lightblue;
}

列的大小符合我的要求，但數字未正確對齊。

我的下一次嘗試是使用 auto 作為列大小，並使用空 div 來填充列。

HTML。

<div class="product-table">
  <div class="first-column">Item</div>
  <div></div><div class="middle-column-title">Price</div><div></div>
  <div class="last-column">Discount</div>

  <div class="first-column">Widget A</div>
  <div></div><div class="middle-column">2.00</div><div></div>
  <div class="last-column">0.50</div>

  <div class="first-column">Widget B</div>
  <div></div><div class="middle-column">2,000.00</div><div></div>
  <div class="last-column">2.50</div>

  <div class="first-column">Widget C</div>
  <div></div><div class="middle-column">3,000,000.00</div><div></div>
  <div class="last-column">3,000.00</div>
</div>

CSS

.product-table {
  display: grid;
  grid-template-columns: 20% 0.4fr auto 0.4fr 1fr;
}

.first-column {
  background-color: lightcyan;
}

.middle-column-title {
  text-align: center;
  background-color: lightsalmon;
}

.middle-column {
  text-align: right;
  background-color: lightsalmon;
}

.last-column {
  text-align: right;
  background-color: lightblue;
}

這導致非常接近我想要的結果，但列寬為 0.4fr + 0.4fr + 價格列寬。 我真正想要的是能夠指定間隔 div 和價格的總寬度，以便我可以使價格和折扣列的寬度相同。

有沒有辦法做到這一點？

Answer 1

一張桌子可能更適合您的需求（和可訪問性）。

這可能是您正在尋找的：

HTML:

<table class="product-table">
  <thead>
    <th class="f-head">Item</th>
    <th class="m-head">Price</th>
    <th class="l-head">Discount</th>
  </thead>
  <tr>
    <td class="first-column">Widget A</td>
    <td class="middle-column">2.00</td>
    <td class="last-column">0.50</td>
  </tr>
  <tr>
    <td class="first-column">Widget B</td>
    <td class="middle-column">2,000.00</td>
    <td class="last-column">2.50</td>
  </tr>
  <tr>
    <td class="first-column">Widget C</td>
    <td class="middle-column">3,000,000.00</td>
    <td class="last-column">3,000.00</td>
  </tr>
</table>

CSS：

.product-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
}

.product-table > th {
  text-align: center;
}

.first-column {
  background-color: lightcyan;
}

.f-head {
  background-color: lightcyan;
  width: 20%;
}

.middle-column {
  text-align: right;
  background-color: lightsalmon;
}

.m-head {
  width: 20%;
  background-color: lightsalmon;
}

.last-column {
  text-align: right;
  background-color: lightblue;
}

.l-head {
  background-color: lightblue;
}

table-layout 為fixed時，列寬由每個th寬度定義。 每個未指定的“th”寬度都將是auto 。

但是......如果你不顧一切地堅持這種結構：

HTML:

<body>
  <div class="product-table">
    <div id="f-column">
      <div><div class="head">Item</div></div>
      <div class="cell">Widget A</div>
      <div class="cell">Widget B</div>
      <div class="cell">Widget C</div>
    </div>
    <div id="m-column">
      <div class="head m-head">Price</div>
      <div class="m-column-numbers">
        <div class="cell"><div class="m-cell">2.00</div></div>
        <div class="cell"><div class="m-cell">2,000.00</div></div>
        <div class="cell"><div class="m-cell">3,000,000.00</div></div>
      </div>
    </div>
    <div id="l-column">
      <div class="head">Discount</div>
      <div class="cell">0.50</div>
      <div class="cell">2.50</div>
      <div class="cell">3,000.00</div>
    </div>
  </div>
</body>

CSS：

body {
  margin: 0;
  padding: 16px;
}
.product-table {
  display: flex;
  width: 100%;
}

.head {
  font-weight: bold;
}

.m-head {
  text-align: center;
}

#f-column {
  background: lightcyan;
  flex: 1;
}

#m-column {
  background: lightsalmon;
  flex: 1 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.m-column-numbers {
  width: max-content;
}

#l-column {
  background: lightblue;
  flex: 1 0 30%;
  text-align: right;
}

.cell {
  width: 100%;
}

.m-cell {
  text-align: right;
}

這提供了結構，但它會使數據的動態填充復雜化，並且根本無法訪問。

如何在 CSS 網格列中將一列右對齊的數字居中？

問題描述

1 個解決方案

解決方案1
0 2022-12-13 21:05:10

如何在 CSS 網格列中將一列右對齊的數字居中？

問題描述

1 個解決方案

解決方案1 0 2022-12-13 21:05:10

解決方案1
0 2022-12-13 21:05:10