CSS Colgroups에서 "text-align: center" 사용: 문제 해결 가이드

테이블 서식을 지정할 때 직면하는 일반적인 문제 중 하나는 텍스트를 가로로 정렬하는 것입니다. . "text-align" 속성은 테이블 셀에 개별적으로 적용할 수 있지만 때로는 colgroup에 적용될 때 효과가 없는 것처럼 보일 수 있습니다. 다음은 이러한 현상이 발생하는 이유와 이를 극복하기 위한 해결 방법에 대한 설명입니다.

Colgroups의 CSS 제한

열을 그룹화하고 형식을 지정하려는 목적에도 불구하고 colgroup은 제한적입니다. 적용할 수 있는 CSS 속성 집합입니다. 불행히도 "text-align"은 그중 하나가 아닙니다. 즉, 열 그룹에 "text-align: center"를 지정하더라도 해당 셀 내의 텍스트 정렬에는 영향을 미치지 않습니다.

대체 솔루션

표의 열 내에서 텍스트를 중앙에 맞추려면 "text-align: center" 속성을 표 셀 자체에 직접 적용해야 합니다. 그러나 이로 인해 또 다른 문제가 발생합니다. 왼쪽 정렬된 "th" 요소로 인해 테이블의 첫 번째 열이 여전히 중앙에 위치하지 않습니다.

이 문제를 해결하려면 다음 CSS 규칙을 추가하세요.

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

이 규칙은 왼쪽 정렬을 유지하는 첫 번째 열을 제외한 모든 테이블 셀을 중앙에 배치하여 테이블 전체에서 올바른 정렬을 보장합니다.

잘못된 HTML

HTML 코드가 유효하지 않음을 언급할 가치가 있습니다. "머리" 요소. 적절한 HTML 구조와 브라우저 지원을 보장하려면 이 문제를 수정해야 합니다.