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

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

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

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

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

CSS 예:

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

td.album {
    width: 20%;
}

요점:

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

수정된 예제 코드:

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