Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned.
The width of the column should be flexible, expanding to accommodate long numbers in data cells or lengthy headers related to that column.
Even when cells contain integers without decimals, the digits should align as if a decimal character was present. For example, the number 512 should still have its digits properly aligned within the cell displaying "512" instead of "512."
The font type should not matter; it doesn't need to be monospaced.
In addition, the numbers should be centered within the column while maintaining alignment of decimal points. Specifically, the blank space on the left side of the cell with the most characters before the decimal (or overall if there is no decimal) should match the one on the right side of the cell with the most characters after the first decimal.
I use "characters" instead of "numerals" since the layout should handle symbolic characters like positive/negative signs before the numerals, or measurement unit acronyms after the numerals.
The traditional method using HTML tables can achieve this layout easily following the HTML 4.01 specifications. By splitting the data at the decimal across two inner cells of a colgroup with specific widths assigned to the columns and alignments set accordingly, you can maintain proper formatting.
Some argue that CSS should replace tables for formatting, but I have yet to find a CSS solution that achieves the same desired effect.
Simply centering text in a column won't keep decimal points aligned properly.
Using align="char" may struggle with aligning integer numbers lacking explicit decimal points.
Adding a decimal point to integers, even if hidden, compromises data integrity.
Padding data with non-breaking spaces doesn't work well with proportional fonts and disrupts data integrity.
Specifying positions with fixed pixel offsets prevents achieving a truly flexible column width based on content length, including variable-length headers.
Implementing JavaScript to dynamically adjust column widths post-rendering is slow, visually disruptive, and considered a messy hack compared to using tables for layout.
It seems challenging to achieve this simple yet desirable layout using a purist's approach of CSS layout + semantic HTML data. Hoping someone can demonstrate an effective solution!