회전 테이블 열 헤더… 이제 마법 번호가 적습니다!

이 기사에서는 CSS를 사용하여 테이블 열 헤더를 회전시키는 방법을 설명하고 삼각 계산이 필요하지 않습니다. 저자는 이전 에이 주제를 다루었지만이 접근법은 복잡한 수학 대신 지오메트리를 사용하여 프로세스를 단순화합니다.

이전 솔루션과 매우 유사한 핵심 CSS는 빠른 참조를 위해 먼저 제시됩니다.

<th><div> 열 헤더 1</div></th>

 테이블 {
  국경-콜라스 : 붕괴;
  -타이티브-볼더 윈트 : 1px;
}
th.rotate {
  흰색 공간 : Nowrap;
  위치 : 상대;
}
th.rotate> div {
  위치 : 절대;
  하단 : 0;
  왼쪽 : 0;
  텍스트 정렬 : 왼쪽;
  변환:
    번역 (calc (100%-var (-테이블-국경-width) / 2), var (-테이블-반드시 width))
    회전 (315deg);
  변환-오리진 : 0% calc (100%-var (-테이블-반드시 width));
  너비 : 100%;
}
th.rotate> div> span {
  위치 : 절대;
  하단 : 0;
  왼쪽 : 0;
  국경-바닥 : var (-테이블 국경 폭) 단단한 회색;
}
TD {
  테두리 오른쪽 : var (-테이블 국경 폭) 단단한 회색;
  최소값 : 30px;
  패딩 탑 : 2px;
  왼쪽 패딩 : 5px;
  텍스트 정렬 : 맞습니다.
}

그런 다음이 기사는 자세한 설명을 탐구합니다. 직접 회전합니다<th> 요소는 두 가지 주요 과제를 나타냅니다. 헤더 텍스트 길이를 기반으로 한 열 너비 계산 (응답성에 맞지 않음)과 회전 중에 테두리 손실.<p> 이 솔루션은 중첩을 사용합니다<code><div> 그리고<code><span></span> 내의 요소<th> . 그만큼<code><div> 컨테이너 역할을하여 절대 포지셔닝을 가능하게하고 콘텐츠가 열 너비에 영향을 미치지 않도록합니다. 그만큼<code><span></span> 텍스트와 하단 테두리를 보유하여 적절한 정렬을 보장합니다.

복잡한 계산을 피하기위한 열쇠는 전략적으로 transform-origin 선택하는 것입니다. transform-origin: 0% calc(100% - var(--table-border-width)); , 회전은 경계를 원활하게 정렬하는 지점 주위에서 발생하여 삼각법 조정이 필요하지 않습니다. translate() 함수는 회전 된 요소를 정확하게 배치합니다.

마지막으로,이 기사는 회전 헤더로 인한 증가 된 높이를 관리하기 위해 Flexbox 컨테이너로 테이블을 감싸는 것이 좋습니다. 이 컨테이너의 예제 CS가 제공됩니다. 이 기사는 회전 테이블 헤더에 대한이 기하학적 접근의 우아함과 단순성을 강조함으로써 결론을 내립니다.