반복 헤더로 더 반응형인 WordPress 테이블 만들기

WordPress 테이블은 지난 몇 년간 WordPress가 발전했음에도 불구하고 양날의 검과 같습니다. 데이터를 제시하기에는 완벽한 후보이지만, 이야기를 전달하기에는 불리합니다. 이것이 충분히 나쁘지 않다고 생각한다면, 스마트폰과 태블릿에 대해 들어보세요. 데이터를 표시할 공간이 훨씬 더 적은 기기입니다. 테이블의 몇 가지 단점은 감수하며 살아야 하지만, 반응형은 그중 하나가 아닙니다.

의 마지막 주요 업데이트에서는 WP Table Manager 추가 반응형 옵션을 갖춘 새로운 반응형 테이블 디자인을 도입했습니다. 이제 WordPress 테이블 관리자의 더 새롭고 개선된 버전이 새로운 반응형 모드와 반복 헤더라는 새로운 옵션을 추가하여 반응형 테이블과 그 동작을 사용자 지정할 수 있도록 도와줍니다.

헤더가 반복되는 반응형 테이블

테이블을 표시할 공간이 충분하지 않으면 어떻게 될까요? 이전 업데이트에서 WP Table Manager 는 두 가지 반응형 옵션을 제공했습니다. 바로 스크롤 막대 추가와 열 숨기기입니다. 이 두 가지 모드에는 각각의 용도가 있지만, 가로 스크롤이나 데이터 숨기기를 피하고 싶다면 새로운 세 번째 모드가 바로 여러분이 찾던 것일 수 있습니다. 바로 반복 헤더입니다.

반복 헤더 반응형 모드는 다른 모든 모드와 마찬가지로 컴퓨터나 노트북과 같은 데스크톱 장치에서처럼 공간이 충분할 때는 기본적으로 일반 표로 표시됩니다. 공간이 충분하지 않으면 표 헤더와 행 값의 두 열로 구성된 더 단순한 표로 축소됩니다.

실제로 이는 테이블에 네 개의 열이 있는 경우, 원본 테이블의 각 행이 반응형 버전에서 네 개의 새로운 행으로 표현된다는 것을 의미합니다. 각각의 새로운 행에는 원본 헤더와 해당 데이터 값만 포함됩니다. 이 방식은 원본 테이블의 각 행에 적용되므로, 데이터 값 옆에는 항상 반복되는 헤더가 있습니다.

이 간단한 반응형 동작 덕분에 반복 헤더 테이블 모드를 사용하면 모바일과 태블릿에서 어떻게 보일지 걱정할 필요 없이 테이블에 원하는 만큼 많은 데이터를 추가할 수 있습니다. 또한 WP Table Manager 는 작은 기기에서 행에 교차 색상을 사용합니다. 원본 테이블의 각 행은 서로 다른 색상을 가지므로 맥락을 유지하고 WordPress 독자가 레코드를 구분할 수 있습니다.

반복 헤더 모드에서 반응형 테이블 사용자 지정하기

테이블을 편집할 때 반복 헤더 모드를 선택할 수 있습니다: 반응형 옵션 에서 형식 메뉴를 선택한 다음, 첫 번째 드롭다운에서 반복 헤더 모드를 찾으세요. 또한 반복 헤더 테이블을 두 가지 방법으로 사용자 정의할 수 있습니다: 반응형 중단점과 반응형 최대 높이입니다.

반응형 중단점은 WordPress 테이블 관리자 플러그인이 테이블을 평소처럼 렌더링하지 않고 반응형 반복 헤더 모드로 전환하는 기준 너비입니다. WordPress 테마와 보유한 열 수를 기준으로 이 값을 추정할 수 있습니다. 특정 너비 이하에서 테이블이 맞지 않을 것 같다면 그 값을 중단점으로 사용하세요.

행이나 열이 많으면 반복 헤더 모드로 인해 페이지가 매우 길어질 수 있습니다. 반응형 최대 높이는 반응형 모드에서 반복 헤더 테이블의 높이를 제한하여 이 문제를 해결합니다. 반응형 테이블이 너무 길면 WordPress 독자는 평소처럼 스크롤바를 사용하여 더 많은 데이터를 볼 수 있습니다.

반응형 테이블을 위한 만능 해결책은 없지만, WordPress 테이블의 반복 헤더 모드가 그에 가깝습니다. 작은 테이블이든 행과 열이 많은 큰 테이블이든, WP Table Manager의 새로운 반복 헤더 모드는 어떤 기기에서든 데이터가 항상 알맞게 표시되도록 보장합니다.