對齊在一個表中的數字的小數點，在細胞

僞「中心」對準的外觀欲包含的十進制數的列的表，前和小數點後變化的長度，與小數點所有對準的。對齊在一個表中的數字的小數點，在細胞

列寬必須有一個「液體」大小，根據需要進行擴展以適應任何數據單元中的很長數字或與該列相關的非常長的HEADER。

含整數的（沒有小數點）細胞應仍顯示與在相同的位置排列的數字的號碼，就好像一個十進制字符存在。（如：數512應該還是有其位數正確地僅包含「512」，而不是「512」的單元對齊）

字體應該是不相關的;等寬不應該是一個要求。

最後，該數字也必須在列儘可能地爲中心，同時保持對齊小數（可見光和暗示！）。具體而言，小數點前的字符數最多的單元格的「左側空白間隙」（或者，如果沒有小數點字符，則是大多數字符）必須與「右側空白間隔」的寬度相同第一個十進制字符後面的字符數最多的單元格。

因爲表格佈局應該處理象徵性字符，例如在數字前加上正號/負號，以及附加數字的測量單位首字母縮略詞等字母，所以我特別說「字符」而不是「數字」作爲最終的要求。

的HTML 4.01規範，「經書」，允許這樣的佈局與簡單的HTML表很容易做到。（在四列colgroup的兩個內部單元格上拆分數據的十進制字符，外部兩個col和內部兩個col width="0*"右對齊單元格與數字的整數部分，左對齊將這兩個單元格設置爲nowrap，然後設置表格的cellpadding="0" cellspacing="0" rules="groups"。）

但是有很多人說這是壞的，應該使用CSS代替表格用於格式化目的。我也明白，具有語義上正確的數據的表應該保持這些數字在一個單元中完好無損。但是我還沒有找到任何實現所需格式的CSS方法！

只需將單個列的文本對齊設置爲「中心」，不會使小數點對齊。

除非我弄錯了，使用ALIGN =「字符」無法處理沒有一個明確的小數點，但仍需彷彿根本對齊整數。

將十進制字符附加到整數，即使隱藏它，在技術上會破壞數據的完整性。

使用非分隔空格填充數據不適用於比例（非等寬字體）字體。而這種破解也會破壞數據的完整性。

通過固定像素偏移量指定位置不允許列具有真正的「液體」寬度，根據需要進行渲染以適合列中所有單元格的內容，包括標題單元格，其中可能包含任何長度在任何時候。

JavaScript在呈現表格後讀取表格的最終寬度，然後動態計算像素偏移量，然後通過DOM重寫格式以將數據「滑動」到對齊速度較慢，並且在數據跳轉時視覺干擾。這是一種徹頭徹尾的骯髒的黑客比使用表格進行佈局更加骯髒！

在我看來，「純粹主義者」的CSS佈局+ HTML語義數據方法無法實現這種簡單但經常需要的佈局！我希望有人可以請證明我錯了，並告訴我如何做到「正確」這種佈局。

來源

2012-09-04 user1645764

您應該首先嚐試並找出如何對齊小數點上的數字（使用align = char does * not * work in reality），請參閱http://stackoverflow.com/questions/11600838/align-decimal-data-in-table-column-by-decimal-point-html5-css3 –

該頁面上的每個解決方案要麼涉及「破壞」數據（例如通過添加多餘的零或空格）或者插入字符間隔跨度（兩者都限制可以使用的字體），或者將數據分割到兩個單元格中（與我的「語義錯誤」的HTML 4.01表格解決方案相同）。這些解決方案中沒有一個解決了視覺專欄中的「最佳嘗試集中」數據問題。 – user1645764

我寫了這個jQuery插件來解決這個問題。它不需要重新處理數據。 https://github.com/ndp/align-column – ndp

我認爲「charoff」屬性是你所需要的。不幸的是，許多瀏覽器不支持的話......

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-charoff

您是否嘗試過每個號碼分成2個字符串？例如

「1234.567」將是「1234」。和「567」

然後你可以在一個單元格（右對齊）第一個字符串，並在接下來的單元格（左對齊），另一部分

來源

2012-09-04 12:09:39

有沒有支持它的瀏覽器？（此外，如果它工作，它不會集中。） –

我不這麼認爲...... –

我的原始HTML 4.01表格解決方案（CSS純粹主義者所忌諱的）Dani的確完全是這樣做的，分裂數字在十進制成兩個字符串。（除了我把小數點放在右邊字符串的開頭，而不是左邊的字符串的末尾，所以只填充了左邊字符串的整數仍然看起來是對齊的;-)） – user1645764

考慮你的要求，有沒有解決方案（甚至對齊到小數點的簡單問題）。

來源

2012-09-04 19:58:10

原始HTML無法做到這一點。我寫了一個jQuery插件來解決這個問題。見https://github.com/ndp/align-column

很簡單你兩袖清風表使用方法：

$('table').alignColumn(3);對齊列索引3.

來源

2013-02-11 23:14:02 ndp

這很好，我看過你的例子。但我不能這樣做。希望您能夠幫助我。給我一個答覆，然後我會顯示我的代碼。謝謝 –

有這個純HTML/CSS的解決方案，但它不是漂亮。您需要將小數點對齊的列分成兩列，兩列之間沒有填充。第一列有整數值並且右對齊，第二列有十進制和十進制值。

<table> 
<thead> 
    <th>customers</th> 
    <th colspan="2">balance</th> 
</thead> 
<tbody> 
    <tr><td>John</td> <td>4</td><td>.45</td></tr> 
    <tr><td>Jane</td> <td>20</td><td></td></tr> 
    <tr><td>Jim</td> <td>2,300</td><td>.64</td></tr> 
</tbody> 
</table> 

<style> 
    th { 
     text-align: center; 
    } 
    td:nth-child(2) { 
     text-align: right; 
     padding-right: 0; 
    } 
    td:nth-child(3) { 
     position: relative; 
     left: -0.2em; 
     text-align: left; 
     padding-left: 0; 
    } 
</style>

你也可以使用類，如「.integer」和「.decimal」，而不是：第n個孩子選擇。這將更加強大，但我試圖保持縮短標記。

來源

2014-08-25 17:25:52

對齊在一個表中的數字的小數點，在細胞

回答

相關問題