표준 HTML
태그는 표 성 데이터에 대해 의미 적으로 소리를 내면서 특히 다양한 셀 함량을 가진 동적 환경에서 열 폭을 제어하는 데 어려움을 나타냅니다. 불일치가 발생합니다. 일부 열은 과도하게 늘어나거나 다른 열이 압축되거나 동일한 너비가 시행되어 콘텐츠가 풍부한 열에 필요한 공간을 희생시킬 수 있습니다. 이 기사는이 문제를 해결하기위한 CSS 해결 방법을 자세히 설명합니다.
도전 : 브라우저 레이아웃 및 열 폭
브라우저 테이블 레이아웃은 css 속성에 힌지
를 사용하면 브라우저 알고리즘은 열에 사용 가능한 너비를 배포합니다. 반대로 는 사용 가능한 공간을 열 사이에 균등하게 나눕니다
요소 중첩 요소가있는 요소는 열 너비를 지정할 수 있지만 제한이 나타납니다. table-layout를 사용하면 사용 가능한 너비를 초과하면 브라우저가 열을 압축 할 수 있습니다. Qualidly EnciD를 사용하여 컨텐츠에 관계없이 지정된 너비를 시행하여 더 넓은 열에서 데이터를 자방화합니다.
이상적으로, 요소에 대한 auto 속성은 솔루션을 제공하여 열이 최소값을 넘어서도 확장 될 수 있지만 그 아래에서 줄어들지는 않습니다. 그러나 이것은 지원되지 않습니다. fixed
해결 방법 : 시뮬레이션
솔루션에는 창의적으로 동작을 시뮬레이션합니다. 여기에는 빈 요소를 추가하고 table-layout: auto 속성을 사용하는 것이 포함됩니다.
이 HTML 구조를 고려하십시오
table-layout: fixed
그런 다음 CSS 스타일 (원래 예제에서 인라인 스타일을 교체)을 각
에 적용합니다. 핵심은 첫 번째 (예 : 200px와 같은 지정된 너비)와 후속 빈 <colgroup></colgroup> 사이의 관계에 있습니다. <col>를 사용하면 빈 열의 공간이 흡수되지만 첫 번째 열의 너비는 고정되어있어 최소 너비를 효과적으로 만듭니다. 첫 번째 열은 필요에 따라 구부러지고 수평 스크롤은 오버플로를 수용합니다. (끈적 끈적한 포지셔닝은 첫 번째 열의 동작을 향상시킬 수 있습니다.) table-layout: auto
접근성 고려 사항
접근성 테스트 (NVDA 및 VoiceOver 사용)는 모든 열이 발표되었으며, 심지어는 빈 컬럼을 발표합니다. 완벽하게 우아하지는 않지만 (첫 번째 열은 2 개를 포함하는 것으로 발표 됨) 탐색을 방해하지 않습니다. 빈 열의 속성은 이것을 향상시킬 수 있지만, Aria는 열악한 HTML 구조를 보상해서는 안된다는 것을 기억하는 것이 중요합니다. table-layout: fixed.이 해결 방법은 "해킹"인 것처럼 보이지만 기능적 솔루션을 제공합니다. 대체 접근 방식과 잠재적 인 사용자 경험은 환영 토론 포인트입니다.
위 내용은 테이블 열에서 최소 폭을 가짜의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
