셀에 나타나는 의사 "가운데" 정렬을 사용하여 표에 있는 숫자의 소수점을 정렬합니다.

Question

나는 소수점 앞과 뒤의 길이가 다르고 소수점이 모두 정렬된 십진수 열이 있는 테이블을 원합니다.

열 너비는 "유동적인" 크기여야 하며 데이터 셀의 매우 긴 숫자나 열과 관련된 매우 긴 헤더를 수용할 수 있도록 필요에 따라 확장되어야 합니다.

정수(소수점 없음)가 포함된 셀에는 소수점이 있는 것처럼 숫자가 동일한 위치에 정렬되어 숫자가 표시되어야 합니다. (예를 들어 숫자 512는 "512" 대신 "512"만 포함하는 셀과 올바르게 정렬되어야 합니다.)

글꼴은 관련성이 없어야 하며 고정폭 글꼴은 필요하지 않습니다.

마지막으로 소수점(표시 및 암시적!) 정렬을 유지하면서 숫자는 가능한 한 열 중앙에 있어야 합니다. 특히, 소수점 문자 이전에 가장 많은 문자가 있는 셀의 "왼쪽 공백" 너비(또는 소수 문자가 없는 경우 단순히 대부분의 문자)가 셀의 "오른쪽 공백" 너비와 같아야 합니다. 셀 너비는 동일합니다. 첫 번째 소수점 문자 다음으로 가장 많은 문자가 포함된 셀입니다.

마지막 요구 사항에 대해 "숫자" 대신 "문자"를 구체적으로 언급한 이유는 테이블 레이아웃에서 숫자 앞의 더하기/빼기 기호와 같은 기호 문자와 숫자 뒤에 추가된 측정 단위 약어와 같은 문자를 처리해야 하기 때문입니다.

HTML 4.01 사양 "정의에 따라"를 사용하면 간단한 HTML 테이블을 사용하여 이러한 레이아웃을 쉽게 수행할 수 있습니다. (데이터를 외부 두 열 width="*" 和内部两个 col width="0*"。右对齐包含数字整数部分的单元格，并将包含数字小数部分和小数部分的单元格左对齐。将这两个单元格设置为 nowrap，然后设置表格的 cellpadding="0" cellspacing =“0”规则=“组”을 사용하여 4열 열 그룹의 두 내부 셀로 소수 문자로 분할합니다.)

하지만 많은 사람들은 이것이 좋지 않으며 표 대신 CSS를 사용하여 형식을 지정해야 한다고 말합니다. 또한 의미상 올바른 데이터가 포함된 테이블은 이러한 숫자를 단일 셀에 그대로 유지해야 한다는 것도 배웠습니다. 그러나 원하는 형식을 달성하는 CSS 방법을 찾지 못했습니다!

단일 열의 텍스트 정렬을 "가운데"로 설정하면 소수점 정렬이 유지되지 않습니다.

실수하지 않는 한, align="char" 사용은 명시적인 소수점이 없는 정수에서는 작동하지 않지만 여전히 소수점이 있는 것처럼 정렬해야 합니다.

숨기더라도 정수에 소수 문자를 추가하면 기술적으로 데이터 무결성이 손상됩니다.

단순 공백으로 데이터를 채우는 것은 비례(고정폭이 아닌) 글꼴에서는 작동하지 않습니다. 이러한 유형의 해킹 공격은 데이터 무결성을 손상시킬 수도 있습니다.

고정 픽셀 오프셋을 통해 위치를 지정하면 열이 진정한 "액체" 너비를 가질 수 없으며, 언제든지 길이에 관계없이 데이터를 포함할 수 있는 머리글 셀을 포함하여 열에 있는 모든 셀의 내용에 맞게 필요에 따라 렌더링됩니다. .

JavaScript는 렌더링 후 테이블의 최종 너비를 읽은 다음 픽셀 오프셋을 동적으로 계산한 다음 DOM 재작성 형식을 통해 데이터 정렬을 "미끄러집니다". 이는 속도가 느리고 데이터가 이동할 때 시각적 노이즈를 생성합니다. 이것은 레이아웃을 위해 테이블을 사용하는 것보다 훨씬 더 더러운 해킹입니다!

제 생각에는 "순수한" CSS 레이아웃 + HTML 의미론적 데이터 접근 방식은 간단하지만 자주 필요한 레이아웃을 달성하는 데 실패합니다! 누군가가 내가 틀렸다는 것을 증명하고 이 레이아웃을 "올바르게" 수행하는 방법을 보여줄 수 있기를 바랍니다.

Answer 1

순수한 html/css 솔루션이 있지만 예쁘지는 않습니다. 십진수 정렬 열을 두 열 사이에 패딩 없이 분할해야 합니다. 첫 번째 열에는 정수 값이 있고 오른쪽 정렬되어 있으며 두 번째 열에는 소수 및 분수 값이 있습니다.

으아아아

:nth-child 선택자 대신 ".integer" 및 ".decimal"과 같은 클래스를 사용할 수도 있습니다. 이것이 더 강력하겠지만 마크업을 짧게 유지하려고 합니다.