CSS가 콘텐츠 크기에 관계없이 표 셀 너비를 제어할 수 있나요?-CSS 튜토리얼-php.cn

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

DDD

풀어 주다： 2024-11-05 01:36:02

원래의

408명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2061

에서 2024-04-23 00:22:19

2222

에서 2024-04-19 15:37:47

1872

에서 2024-04-18 23:52:34

1753

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

1781