Align decimal points of numbers in table with pseudo "center" alignment appearing in cells

Question

I want a table containing a column of decimal numbers with different lengths before and after the decimal point, and with the decimal points all aligned.

Column widths must be of a "flowing" size, expanding as necessary to accommodate very long numbers in any data cells, or very long headers associated with the column.

Cells containing integers (without decimal points) should still display numbers, with the numbers aligned in the same position as if a decimal character were present. (For example, the number 512 should still align correctly with a cell that only contains "512" instead of "512".)

Font should be irrelevant; monospaced should not be required.

Finally, the numbers must also be centered in the column as much as possible while keeping the decimal points (visible and implicit!) aligned. Specifically, the width of the "left white space" of the cell with the most characters before the decimal character (or simply the majority of characters if no decimal character is present) must be equal to the width of the "right white space" of the cell The width is the same. The cell with the most characters after the first decimal character.

For the final requirement, I specifically said "characters" rather than "numbers" because the table layout should handle symbolic characters such as plus/minus signs in front of numbers, and letters such as measurement unit abbreviations appended after numbers.

The HTML 4.01 specification "by definition" allows such layouts to be easily accomplished using simple HTML tables. (Split the data by decimal character into two inner cells of a 4-column colgroup, with the outer two cols width="*" and the inner two cols width="0*" . Right-align the cells containing the integer part of the number, and left-align the cells containing the decimal and decimal parts of the number. Set these two cells to nowrap, and then set the # of the table ##cellpadding="0" cellspacing="0" rule="group".)

But a lot of people say this is bad and should be formatted using CSS instead of tables. I also learned that a table with semantically correct data should keep these numbers intact in a single cell. But I haven't found any CSS way to achieve the desired formatting!

Simply setting the text alignment of a single column to "Centered" does not maintain decimal point alignment.

Unless I'm mistaken, using align="char" doesn't work with integers that don't have an explicit decimal point, but still need to be aligned as if they had a decimal point.

Appending the decimal character to an integer, even if it is hidden, technically breaks data integrity.

Padding data with non-breaking spaces does not work with proportional (non-monospaced) fonts. This type of hacking attack can also compromise data integrity.

Specifying position via a fixed pixel offset does not allow the column to have a true "liquid" width, rendering as needed to fit the contents of all cells in the column, including header cells, which can contain data of any length at any time.

JavaScript reads the final width of the table after rendering, then dynamically calculates the pixel offset, and then "slips" the data alignment through the DOM rewrite format, which is slow and creates visual noise when the data jumps around. This is a downright dirty hack, even dirtier than using tables for layout!

In my opinion, the "purist" approach to CSS layout HTML semantic data fails to achieve this simple but often needed layout! I'm hoping someone can prove me wrong and show me how to do this layout "correctly".

Answer 1

There is a pure html/css solution, but it's not pretty. You need to split the decimal aligned column into two columns with no padding between them. The first column has integer values ​​and is right justified, the second column has decimal and fractional values.

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

You can also use classes like ".integer" and ".decimal" instead of the :nth-child selector. This would be more robust, but I'm trying to keep the markup short.