셀 크기를 왜곡하지 않고 HTML 테이블의 텍스트를 회전하는 방법은 무엇입니까?

CSS를 사용하여 HTML 표에서 텍스트 회전 및 셀 크기 조정

표 셀에서 텍스트를 회전하려고 할 때 다음 사항도 고려하는 것이 중요합니다. 셀 크기에 영향을 미칩니다. 제공된 예에서 볼 수 있듯이 CSS 변환을 사용하여 셀 크기를 조정하지 않고 텍스트를 회전하면 결과가 왜곡될 수 있습니다.

이 문제를 해결하려면 표와 셀 스타일을 조정해야 합니다. 표 헤더(th)에 대해 수직 정렬: 하단 및 텍스트 정렬: 중심을 설정하면 회전 후 텍스트가 올바르게 배치됩니다.

특히 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>

이러한 스타일 조정을 구현하면 적절한 셀 크기와 서식을 유지하면서 텍스트를 90도 회전하는 것이 가능해졌습니다.

위 내용은 셀 크기를 왜곡하지 않고 HTML 테이블의 텍스트를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!