테이블 열에서 가짜 최소 너비

좋은 올' <table> 태그는 테이블 형식 데이터를 표시하기 위한 가장 시맨틱한 HTML입니다. 그러나 테이블이 표시되는 방식, 특히 각 테이블 셀에 얼마나 많은 콘텐츠가 들어가는지 알 수 없는 동적 환경의 열 너비를 제어하는 ​​것이 매우 어렵다는 것을 알았습니다. 경우에 따라 한 열은 매우 넓고 다른 열은 크런치됩니다. 다른 경우에는 동일한 너비를 얻지만 더 많은 콘텐츠를 포함하고 더 많은 공간이 필요한 열을 희생합니다.

하지만 좀 더 쉽게 만드는 데 도움이 되는 CSS 트릭 같은 해결 방법을 찾았습니다. 이번 포스팅에서 보여드리고 싶은 내용입니다.

문제

먼저 브라우저에서 레이아웃을 처리하는 방법을 이해해야 합니다. 우리는 table-layout 테이블이 각 테이블 열의 너비를 분배하는 방법을 정의하는 CSS의 속성입니다. 다음 두 값 중 하나를 사용합니다.

• auto (기본값)
• fixed

열의 너비를 정의하지 않고 테이블부터 시작하겠습니다. 즉, 브라우저가 각 열에 얼마만큼의 너비를 줄지 결정하게 할 것입니다. table-layout: auto CSS에서 그것에. 알다시피 브라우저는 각 열 사이에서 사용 가능한 전체 너비를 나누어야 하는 알고리즘으로 최선을 다합니다.

자동 테이블 레이아웃을 table-layout: fixed이면 브라우저는 사용 가능한 전체 공간을 총 열 수로 나눈 다음 해당 값을 각 열의 너비로 적용합니다.

하지만 열의 너비를 제어하려면 어떻게 해야 할까요? 우리는 <colgroup> 도와주는 요소! 개별로 구성되어 있습니다 <col> 각 열에 필요한 정확한 너비를 지정하는 데 사용할 수 있는 요소입니다. 그것이 어떻게 작동하는지 보자 table-layout: auto:

설명을 위해 스타일을 인라인했습니다.

인라인 너비가 합산될 때 사용 가능한 테이블 공간의 양을 초과하기 때문에 브라우저는 인라인 너비를 고려하지 않습니다. 결과적으로 테이블은 모든 열이 표시되도록 열에서 공간을 훔칩니다. 이것은 완벽하게 훌륭한 기본 동작입니다.

어떻게 <colgroup> 작업 table-layout: fixed. 알아 보자:

전혀 좋아 보이지 않습니다. 나머지 열에 대해 고정된 너비를 유지하면서 약간 유연하게 하려면 콘텐츠가 많은 열이 필요합니다. 고정 table-layout value 는 너비를 존중하지만 가장 많은 공간이 필요한 열의 공간을 차지할 정도로 많이 사용합니다. 이는 우리에게 적합하지 않습니다.

우리가 설정할 수만 있다면 이것은 쉽게 해결할 수 있습니다. min-width 대신 열에 width. 그런 식으로 열은 "이 최소값에 도달할 때까지 여러분 모두에게 내 너비의 일부를 줄 수 있습니다."라고 말할 것입니다. 그런 다음 테이블은 단순히 컨테이너를 오버플로하고 사용자에게 테이블의 나머지 부분을 표시할 수 있는 가로 스크롤을 제공합니다. 그러나 불행하게도, min-width on 테이블 열은 <col> 요소입니다.

해법

해결책은 가짜 min-width 이를 위해서는 약간 창의적이어야 합니다.

빈을 추가할 수 있습니다. <col> 우리의 두 번째 열로 <colgroup> HTML에서 colspan 첫 번째 열이 두 열의 공간을 차지하도록 첫 번째 열의 속성:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

이전 예제의 인라인 스타일 대신 클래스를 추가했습니다. 동일한 아이디어가 여전히 적용됩니다. 각 열에 너비를 적용하고 있습니다.

트릭은 첫 번째 간의 관계입니다. <col> 그리고 비어있는 두 번째 <col>. 첫 번째에 너비를 적용하면 <col> (이것의 200px 위 스니펫에서) 두 번째 열은 고정 테이블 레이아웃이 열에 배포하기 위해 사용 가능한 공간을 나눌 때 소모됩니다. 그러나 첫 번째 열의 너비(200px) 존중되고 그대로 유지됩니다.

자보세요! 우리는 가짜가 있습니다 min-width 테이블 셀에 설정합니다. 사용 가능한 공간이 변경되면 첫 번째 셀이 구부러지고 우리가 원하는 대로 테이블이 가로 스크롤을 위해 오버플로됩니다.

(조금 추가했습니다. 끈적한 포지셔닝 거기의 첫 번째 열에.)

접근 용이성

여기서 접근성을 완전히 잊지 말자. Windows의 NVDA와 macOS의 VoiceOver를 통해 테이블을 실행한 결과 XNUMX개만 사용하는 경우에도 XNUMX개의 열이 모두 발표된다는 것을 알았습니다. 그리고 첫 번째 열에 초점이 맞춰지면 "열 XNUMX~XNUMX"라고 알립니다. 완벽하게 우아하지는 않지만 길을 잃지 않을 것입니다. 나는 우리가 aria-hidden 사용하지 않는 열의 속성이지만 ARIA가 열악한 HTML을 대체할 수 없다는 것도 알고 있습니다.

---

인정할게, 이건 약간, 음, 해키 같은 느낌이야. 하지만 작동합니다! 의견에 다른 접근 방식이 있거나 이 "해킹"이 사용자에게 가져올 수 있는 혼란이 있으면 알려주십시오.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/faking-min-width-on-a-table-column/