집 >웹 프론트엔드 >CSS 튜토리얼 >CSS가 콘텐츠 크기에 관계없이 표 셀 너비를 제어할 수 있나요?

CSS가 콘텐츠 크기에 관계없이 표 셀 너비를 제어할 수 있나요?

Can CSS Control Table Cell Widths Regardless of Content Size?

CSS로 표 셀 너비 제어

HTML 표 영역에서는 다양한 크기의 콘텐츠를 처리할 때 표 셀의 너비를 균일하게 유지하는 것이 어려울 수 있습니다. 관련된 셀 수에 관계없이 CSS를 통해서만 원하는 결과를 얻을 수 있습니까?

HTML 구조는 간단합니다. 상위

하위

요소는 테이블 셀을 나타냅니다.

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS를 활용하면 이 문제를 해결할 수 있습니다. 콘텐츠 크기에 관계없이 동일한 셀 너비를 보장하려면 다음을 수행해야 합니다.

고정 테이블 레이아웃 메커니즘을 트리거합니다: 테이블 레이아웃 설정: 고정; 상위
에 있습니다. 이는 브라우저가 콘텐츠에 맞게 자동 조정하는 대신 지정된 셀 너비를 적용하도록 지시합니다.
테이블 셀에 너비 할당: 필수는 아니지만 작은 너비(예: 2)를 할당합니다. %)를 각
표 셀을 나타내는 것은 고정된 표 레이아웃의 트리거 역할을 합니다.

최종 CSS 코드는 다음과 같습니다.

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%;
}</code>

이 접근 방식을 사용하면 표 셀이 동일하게 유지됩니다. 내용에 상관없이 일관된 모양을 보장합니다.

위 내용은 CSS가 콘텐츠 크기에 관계없이 표 셀 너비를 제어할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：