조정 가능한 셀 크기를 사용하여 HTML 테이블에서 텍스트를 90도 회전하는 방법은 무엇입니까?

HTML에서 조정 가능한 셀 크기로 텍스트를 90도 회전하는 방법

HTML 테이블에서 텍스트를 회전할 때 셀 크기 일관성을 유지하는 데 어려움을 겪는 것이 일반적입니다. 이 문제를 해결하기 위해 복잡한 높이 계산 없이 CSS와 HTML을 사용하는 솔루션을 살펴보겠습니다.

비결은 수직 정렬 및 텍스트 정렬 CSS 속성을 사용하여 표 셀 내의 텍스트 방향을 조정하는 데 있습니다. . 또한 -ms-writing-mode, -webkit-writing-mode 및 writing-mode 속성을 활용하여 세로 텍스트 쓰기를 활성화합니다.

90도 회전을 달성하려면 변환을 적용합니다. : 회전(180deg); 텍스트가 세로로 표시되는지 확인합니다. 이 기술은 모든 브라우저, 특히 를 사용해야 하는 Chrome에서는 완벽하게 작동하지 않을 수 있습니다. 요소를 사용하여 표 머리글(번째)의 텍스트 방향을 수정합니다.

보여줄 실제 예는 다음과 같습니다.

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

이 접근 방식을 사용하면 원하는 셀 크기를 유지하면서 테이블 셀. HTML 테이블에 번거로움 없이 수직 텍스트를 표시하려면 이 기술을 활용하여 데이터가 명확하고 우아하게 표시되도록 하세요.

위 내용은 조정 가능한 셀 크기를 사용하여 HTML 테이블에서 텍스트를 90도 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!