CSS calc()를 사용하여 고정 너비 셀과 가변 너비 셀이 포함된 반응형 테이블을 어떻게 얻을 수 있나요?

calc() 및 고정 너비 셀을 사용하여 표 스타일 지정

웹 개발에서 표는 데이터를 정리하는 데 자주 사용되지만, 가변 내용 셀의 유연성을 유지하면서 열의 특정 너비를 설정하는 것은 어렵습니다. 이때 CSS calc() 함수가 유용하게 사용될 수 있습니다.

첫 번째 열과 마지막 열과 같은 특정 열에 대해 고정 너비 셀이 있는 테이블을 원하지만 나머지 셀은 가변 너비가 되며 내용에 맞게 조정됩니다. calc()를 사용하면 이러한 가변 너비 셀의 너비를 테이블에 남아 있는 공간의 백분율로 지정할 수 있습니다.

그러나 제공된 코드 스니펫에서는 내에서 calc()를 사용하는 데 어려움이 있을 수 있습니다. 테이블. 이는 테이블에 셀 내용의 우선순위를 지정하여 열에 공간을 분배하는 특정 규칙이 있기 때문입니다.

이 문제를 해결하고 원하는 레이아웃을 얻으려면 다음 접근 방식을 사용할 수 있습니다.

1. 테이블 레이아웃 설정: 고정; 테이블에: 이렇게 하면 테이블의 하위 td 요소가 사용자가 지정한 너비를 준수하게 되어 고정 너비 셀이 지정된 크기로 유지됩니다.
2. 테이블에 고정 너비가 있는지 확인하세요. width (이 경우 100%): 정의된 너비는 테이블 레이아웃에 매우 중요합니다: 고정;
3. 나머지 열에 백분율 사용: 고정 너비 열을 고려한 후 백분율을 사용하여 나머지 열에 상대 너비를 할당할 수 있습니다. 예를 들어, 이 열이 남은 공간의 40%, 40%, 20%를 차지하도록 하려면 너비를 각각 40%, 40%, 20%로 설정합니다.

이 단계를 수행하면 calc()를 활용하여 의도한 대로 동작하는 고정 너비 셀과 가변 너비 셀이 포함된 테이블을 얻을 수 있으며, 내용에 맞게 조정되고 무결성을 보장할 수 있습니다. 고정 너비 열입니다.

위 내용은 CSS calc()를 사용하여 고정 너비 셀과 가변 너비 셀이 포함된 반응형 테이블을 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!