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

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

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

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

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

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

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

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

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

<garden> : 정원 재배 - 완전한 돌연변이 가이드

3 몇 주 전 By DDD

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

KB5055612 수정 방법 Windows 10에 설치되지 않습니까?

3 몇 주 전 By DDD

Nordhold : Fusion System, 설명

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

자바 튜토리얼

1666

14

Cakephp 튜토리얼

1425

52

라라벨 튜토리얼

1328

25

PHP 튜토리얼

1273

29

C# 튜토리얼

1253

24

더보기