동적 높이 및 오버플로 없이 테이블 머리글에 세로 텍스트를 표시하려면 어떻게 해야 합니까?

동적 높이와 오버플로 없이 테이블 헤더에 세로 텍스트 표시

CSS 변환 속성을 사용하여 회전된 텍스트를 테이블 헤더로 표시하려면 다음이 있습니다. 머리글 행을 조정해야 할 때 회전된 텍스트가 넘치지 않도록 방지하는 문제 높이.

문제:

CSS 변환 속성을 사용할 때:

transform: rotate(-90deg);

머리글 텍스트를 회전하려면 머리글 행이 원래 위치에 유지됩니다. 원래 높이로 인해 회전된 텍스트가 오버플로됩니다.

[잘못된 이미지 예]

해결책:

필요에 따라 머리글 행을 늘리려면 CSS 속성을 사용하세요.

writing-mode: vertical-lr;

설명 :

writing-mode는 텍스트 쓰기 방향을 제어합니다. Vertical-lr 값은 텍스트를 왼쪽에서 오른쪽으로 수직으로 작성해야 함을 나타냅니다. 이렇게 하면 회전된 텍스트가 머리글 셀의 세로 공간에 들어가고 그에 따라 머리글 행의 높이가 조정될 수 있습니다.

[올바른 예 이미지]

예제 코드:

th {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
}

위 내용은 동적 높이 및 오버플로 없이 테이블 머리글에 세로 텍스트를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!