CSS Calc() 및 Table-Layout을 사용하여 테이블에서 유연한 열 너비를 얻는 방법은 무엇입니까?

CSS Calc를 사용하여 테이블에서 유연한 열 너비

고정 너비 열과 가변 너비 열이 모두 있는 테이블을 추구하려면 다음을 사용하세요. CSS calc() 함수만으로는 부족할 수 있습니다. 테이블은 셀 내용을 기반으로 공간 분배에 대한 특정 규칙을 시행하므로 calc()가 사용 가능한 공간을 균등하게 분배하기가 어렵습니다.

이 장애물을 극복하기 위해 테이블 ​​레이아웃 속성을 고정으로 설정하면 됩니다. 테이블 요소. 이렇게 하면 하위 td 요소가 우리가 정의한 너비를 준수하게 됩니다. 또한 테이블의 너비(예: 100%)를 지정해야 합니다.

테이블 레이아웃을 적용하려면 테이블에 테이블 표시 유형도 있어야 합니다. 이는 기본 설정이며 일반적으로 생략됩니다. 그러나 완전성을 위해 여기에 포함되었습니다.

이제 백분율을 사용하여 나머지 열의 너비를 자유롭게 조정할 수 있습니다. 예:

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

td.album {
  width: 20%;
}

고정 너비 열을 고려한 후 남은 공간은 상대 너비가 있는 열에 분산됩니다.

한 가지 주의할 점은 테이블에 display: table을 사용한다는 것입니다. 더 이상 테이블의 높이(또는 최소 높이 또는 최대 높이)를 정의할 수 없음을 의미합니다.

다음은 이러한 수정 사항을 통합한 수정된 예입니다.

위 내용은 CSS Calc() 및 Table-Layout을 사용하여 테이블에서 유연한 열 너비를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!