>웹 프론트엔드 >CSS 튜토리얼 >고정 너비 열이 있는 테이블에서 가변 너비 열에 백분율을 사용하는 방법은 무엇입니까?

고정 너비 열이 있는 테이블에서 가변 너비 열에 백분율을 사용하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-16 02:59:03972검색

How to Use Percentages for Variable Width Columns in Tables with Fixed Width Columns?

테이블과 함께 calc() 사용: 대체 솔루션

calc() 함수를 사용하여 고정 너비 및 가변 너비 테이블 열을 구현하려고 하면 다음과 같은 문제가 발생할 수 있습니다. 한계에 직면합니다. 테이블에서 calc() 함수는 너비 계산에 대한 백분율을 지원하지 않습니다.

이 문제를 극복하려면 다른 접근 방식을 채택하는 것이 좋습니다.

  1. 테이블 레이아웃 설정 속성: 테이블에 대해 table-layout 속성을 "fixed"로 설정하여 열이 특정 너비를 따르도록 강제합니다. 또한 테이블 너비를 100%로 지정합니다.
  2. calc()를 제거하고 백분율을 사용합니다. calc() 대신 나머지 열에 일반 백분율을 사용합니다. 고정 너비 열을 결정하고 해당 너비를 할당합니다. 남은 공간은 상대 너비 열에 비례하여 분배됩니다.

CSS 예:

td.title, td.interpret {
    width: 40%;
}

td.album {
    width: 20%;
}

요점:

  • 테이블 레이아웃을 "고정"으로 설정하면 열 너비가 지정된 값을 준수합니다.
  • 상대 너비 열에 백분율을 사용하면 나머지 공간을 비례적으로 분배할 수 있습니다.
  • Display:table은 테이블 레이아웃이 작동하는 데 필요하지만 테이블 높이 사용을 방지합니다.

수정된 예제 코드:

<table border="0">

위 내용은 고정 너비 열이 있는 테이블에서 가변 너비 열에 백분율을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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