calc()를 사용하여 고정 너비 열과 가변 너비 열이 있는 테이블을 어떻게 만들 수 있습니까?

테이블에 calc() 사용: 고정 너비 열과 가변 너비 열

고정 너비와 가변 너비 열이 있는 테이블을 만들려고 할 때- CSS calc() 함수를 사용하여 너비 열을 사용하면 백분율(%) 문제가 발생할 수 있습니다. 테이블에는 calc()를 호환되지 않게 만드는 공간 분배에 대한 특정 규칙이 있습니다.

table-layout을 사용하는 솔루션:

이 문제를 해결하려면 table-layout 속성을 고정으로 설정하세요. 테이블을 위해. 이렇게 하면 테이블의 하위 요소(td)가 지정된 너비를 준수하게 됩니다. 또한 테이블 표시를 테이블로 설정하고 너비를 제공합니다.

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

백분율 기반 열:

나머지 열에는 계산 대신 일반 백분율을 사용합니다. (). 고정 너비 열을 수용한 후 남은 공간은 이러한 열에 비례적으로 분배됩니다.

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

참고:

이 솔루션을 사용하려면 테이블 표시가 다음과 같아야 합니다. 테이블에 세팅하면 높이를 정할 수 없게 됩니다.

수정됨 예:

원래 코드의 수정된 버전은 다음과 같습니다.

<table border="0">

위 내용은 calc()를 사용하여 고정 너비 열과 가변 너비 열이 있는 테이블을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!