Выравнивание десятичной точки чисел в таблице с появлением псевдо-центрового выравнивания в ячейке ⇐ CSS

[Anonymous]

Мне нужна таблица, содержащая столбец десятичных чисел различной длины до и после десятичной точки, со всеми выровненными десятичными точками.

Ширина столбца должна иметь «жидкий» размер, расширяющийся по мере необходимости для размещения ЛИБО очень длинного числа в ЛЮБОЙ ячейке данных, ЛИБО очень длинного ЗАГОЛОВКА, относящегося к этому столбцу.

Ячейки, содержащие целые числа (нет десятичная точка) по-прежнему должен отображать числа с цифрами, выровненными в том же положении, как если бы присутствовал десятичный символ. (например, цифры числа 512 по-прежнему должны быть правильно выровнены с ячейкой, содержащей только «512» вместо «512».)

Шрифт не должен иметь значения; моноширинный формат не должен быть обязательным.

Наконец, числа также должны быть как можно лучше центрированы в столбце, сохраняя при этом выравнивание десятичных знаков (видимых и подразумеваемых!).
В частности, «пробел слева» в ячейке с наибольшим количеством символов перед десятичным символом (или просто большинство символов, если десятичный символ отсутствует) должен иметь равную ширину, как «пробел справа». разрыв» ячейка с наибольшим количеством символов после первого десятичного символа.

Я специально говорю «символы» вместо «цифр» для последнего требования, поскольку макет таблицы должен обрабатывать символические символы. например, положительные/отрицательные знаки перед цифрами и буквы, такие как аббревиатуры единиц измерения, добавляемые к цифрам.

Спецификация HTML 4.01, «по правилам», допускает такое макет, который нужно сделать очень легко с помощью простой таблицы HTML. (Разделите данные десятичного символа по двум внутренним ячейкам группы столбцов из 4 столбцов: два внешних col width="*" и два внутренних col width="0*". Справа -выровнять ячейку по целой части числа и выровнять ее по левому краю по десятичному символу и дробной части числа. Установите для обеих этих ячеек значение nowrap, затем установите таблицу. cellpadding="0" cellpacing="0" Rules="groups".)

Но некоторые люди говорят, что это плохо, и что CSS должен использоваться вместо таблиц в целях форматирования. Я также понимаю, что таблица с семантически корректными данными должна сохранять эти числа в одной ячейке. Но я не нашел никакого метода CSS для достижения желаемого форматирования!

Простая установка выравнивания текста одного столбца по центру не обеспечивает выравнивание десятичных точек.< /p>

Если я не ошибаюсь, использование align="char" не может обрабатывать целые числа, которые не имеют явной десятичной точки, но их все равно необходимо выровнять, как если бы они сделал.

Присоединение десятичного символа к целым числам, даже если оно скрыто, технически нарушает целостность данных.

Заполнение данных неразрывными пробелами не нарушает работать с пропорциональными (немоноширинными) шрифтами. И этот хак также нарушит целостность данных.

Указание позиции с помощью фиксированных смещений в пикселях не позволяет столбцу иметь действительно «жидкую» ширину, отображаемую так, как необходимо для помещать содержимое всех ячеек столбца, включая ячейку заголовка, которая в любое время может содержать данные любой длины.

JavaScript, считывающий результирующую ширину таблицы после рендеринга, затем динамически вычисляет смещения пикселей, а затем переписывает форматирование через DOM, чтобы «выровнять» данные, это медленно и визуально нарушается, когда данные прыгают. И это откровенный грязный хак, который даже грязнее, чем использование таблиц для верстки!

Мне это почти кажется «пуристским» CSS-макетом + HTML-семантическими данными. подход не способен создать этот простой, но часто желанный макет!
Я надеюсь, что кто-нибудь сможет доказать мою неправоту и показать, как сделать этот макет «правильно».

Подробнее здесь: https://stackoverflow.com/questions/122 ... udo-centre