對齊表格中數字的小數點，並在儲存格中出現偽「中心」對齊

Question

我想要一個包含一列十進制數的表格，小數點前後的長度不同，小數點全部對齊。

列寬必須具有「流動」大小，並根據需要進行擴展，以容納任何資料單元格中的非常長的數字，或與該列相關的非常長的標題。

包含整數（無小數點）的儲存格仍應顯示數字，且數字在同一位置對齊，就像存在小數字符號一樣。 （例如，數字 512 的數字仍應與僅包含「512」而不是「512」的儲存格正確對齊。）

字體應該是無關緊要的；不應要求等寬。

最後，數字也必須盡可能在列中居中，同時保持小數點（可見的和隱含的！）對齊。 具體來說，小數點字元之前具有最多字元的單元格的「左側空白間隙」（或者如果不存在小數字符，則簡單地是大多數字元）的寬度必須與單元格的「右側空白間隙」的寬度相同。第一個小數字符後面字元最多的儲存格。

對於最終要求，我特別說“字符”而不是“數字”，因為表格佈局應該處理符號字符，例如數字前面的正/負號，以及數字後面附加的測量單位縮寫等字母。

HTML 4.01 規格「依規定」允許使用簡單的 HTML 表格輕鬆完成此類佈局。 （將資料以小數字符拆分到4 列colgroup 的兩個內部單元格中，其中外部兩個col width="*" 和內部兩個col width="0*" 。右對齊包含數字整數部分的單元格，並將包含數字小數部分和小數部分的單元格左對齊。將這兩個單元格設置為nowrap，然後設置表格的cellpadding="0" cellspacing =“0”規則=“組”。）

但是很多人說這很糟糕，並且應該使用 CSS 而不是表格來進行格式化。我還了解到，具有語義正確資料的表格應該將這些數字完整地保存在單一儲存格中。但我還沒有找到任何 CSS 方法來實現所需的格式！

僅將單列的文字對齊方式設為「居中」並不能保持小數點對齊。

除非我弄錯了，否則使用align="char"不能處理沒有明確小數點的整數，但仍然需要像有小數點一樣對齊。

將小數字符附加到整數上，即使隱藏它，從技術上講也會破壞資料完整性。

使用不間斷空格填充資料不適用於比例（非等寬）字體。這種黑 客攻擊也會破壞資料完整性。

透過固定像素偏移指定位置不允許列具有真正的「流動」寬度，根據需要進行渲染以適應列中所有單元格的內容，包括標題單元格，它可以包含任何長度的資料隨時。

JavaScript 在渲染後讀取表格的最終寬度，然後動態計算像素偏移，然後透過 DOM 重寫格式以「滑動」資料對齊，速度很慢，並且當資料跳躍時會產生視覺幹擾。這是一個徹頭徹尾的骯髒黑 客行為，甚至比使用表格進行佈局更骯髒！

在我看來，「純粹主義者」的 CSS 佈局 HTML 語意資料方法無法實現這種簡單但經常需要的佈局！ 我希望有人能證明我錯了，並向我展示如何「正確」地進行此佈局。

Answer 1

有一個純 html/css 解決方案，但它並不漂亮。您需要將小數對齊列分成兩列，它們之間沒有填滿。第一列具有整數值且右對齊，第二列具有小數和小數值。

customers	balance
John	4	.45
Jane	20
Jim	2,300	.64

您也可以使用「.integer」和「.decimal」等類，而不是 :nth-child 選擇器。這會更穩健，但我試著保持標記簡短。