jQuery Mobile 반응형 테이블 — column-toggle · data-priority 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 반응형 테이블
column-toggle · data-priority 완전 정리

화면이 좁아지면 덜 중요한 컬럼부터 자동으로 숨기기

시작 오늘 분석할 코드

모바일에서 컬럼이 많은 표는 가로 스크롤이 생긴다. jQuery Mobile은 data-mode="columntoggle"로 화면이 좁아지면 우선순위가 낮은 컬럼부터 자동으로 숨기고, 사용자가 토글 버튼으로 보이게 켤 수 있는 표를 만든다.

<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stripe" id="my-table1"> <thead> <tr> <th data-priority="2">학년</th> <th>이름</th> <!-- priority 없음 = 항상 표시 --> <th data-priority="3">성별</th> <th data-priority="1">성적</th> </tr> </thead> <tbody> <tr><th>1</th><td>홍길동</td><td>남</td><td>94</td></tr> ... </tbody> </table>

실제 출력 미리보기

PC 화면 — 모든 컬럼 표시

학년	이름	성별	성적
1	홍길동	남	94
4	신나라	여	77
3	홍미미	여	88

좁은 화면 — priority가 높은 컬럼은 숨김

학년	이름	성별	성적
1	홍길동	남	94
4	신나라	여	77
3	홍미미	여	88

---

용어 핵심 키워드

data-role="table"jQuery Mobile이 인식하는 반응형 테이블

data-mode="columntoggle"컬럼 토글 모드 — 좁은 화면에서 일부 숨김

data-priority컬럼의 중요도 — 1(가장 중요)~6(덜 중요)

priority 없음항상 표시 — 절대 숨기지 않을 핵심 컬럼

ui-responsive반응형 동작에 필요한 jQM 기본 클래스

table-stripe홀짝 줄 배경 색을 다르게 (얼룩말 패턴)

---

1 data-mode="columntoggle" — 컬럼 토글 모드

jQuery Mobile의 반응형 테이블에는 두 가지 모드가 있다. columntoggle은 그중 컬럼을 숨기는 방식이다.

columntoggle (이 코드)

좁아지면 priority 높은 컬럼부터 자동 숨김. 사용자는 우측 상단의 "Columns" 토글 버튼으로 직접 보이기/숨기기 선택 가능.

reflow (대안)

좁아지면 표가 세로로 풀어짐 — 한 행이 여러 줄의 키:값 쌍으로 변환. 컬럼이 적을 때 가독성 좋음.

---

2 data-priority — 우선순위 숫자

각 <th>에 1~6 사이의 숫자를 부여한다. 숫자가 작을수록 더 중요해서 화면이 좁아져도 오래 살아남는다. 속성을 안 적으면 항상 표시 — 이름처럼 "어떤 일이 있어도 보여야 할" 컬럼에 사용한다.

data-priority	의미	이 코드의 컬럼
(없음)	항상 표시	이름 — 핵심 식별자
1	가장 중요 (가장 마지막에 숨김)	성적 — 표의 핵심 데이터
2	중요	학년
3~6	덜 중요 (먼저 숨김)	성별 (3) — 가장 먼저 숨겨짐

※ 우선순위 정하는 기준

• 식별 가능한가? — 이름·ID처럼 행을 구분하는 정보는 우선순위 없이 항상 표시
• 핵심 데이터인가? — 표가 보여주려는 본질 (성적표라면 성적) → priority 1
• 맥락 정보 → 2~3 (학년, 학기 등)
• 부가 정보 → 4~6 (성별, 비고, 메모)

---

3 토글 버튼 동작

columntoggle 모드를 켜면 jQuery Mobile이 표 위에 "Columns ▼" 토글 버튼을 자동으로 만든다. 클릭하면 모든 컬럼의 체크박스가 펼쳐지고, 사용자가 직접 보이기/숨기기를 토글할 수 있다.

⚙ 자동 숨김의 우선순위는 화면 너비별로 점진적이다. 너무 좁아지면 priority 높은 것부터 자동 체크 해제됨. 사용자는 토글로 다시 켤 수 있다.

---

 

반응형

 

4 클래스 — ui-responsive와 table-stripe

class="ui-responsive table-stripe"는 두 가지를 함께 적용한다.

• ui-responsive — 반응형 표시(필수)
• table-stripe — 짝수 행 배경색을 다르게 (가독성 ↑)

둘 다 jQuery Mobile이 미리 정의한 클래스라 추가 CSS는 필요 없다.

---

5 자주 하는 실수

실수	증상	해결
모든 th에 priority 부여	좁은 화면에서 식별 컬럼까지 사라짐	식별 컬럼(이름)은 priority 없이
priority 숫자에 7 이상	인식 안 됨 (1~6만 유효)	1~6 범위 안에서 분배
id 누락	토글 동작 가끔 깨짐	table에 고유 id 필수
data-mode 오타 ("toggle")	일반 표로 표시	정확히 "columntoggle"
tbody의 첫 셀에 <td>만 사용	행 헤더 의미 없음	식별 셀은 <th> 사용

---

6 현대식 대안

오늘날 같은 효과는 CSS Grid + media query나 DataTables 라이브러리로 구현하는 게 표준이다. jQuery Mobile은 EOL이라 신규 프로젝트에는 권장되지 않는다.

---

핵심 한 줄 요약

data-role="table"반응형 테이블 활성화

data-mode="columntoggle"좁은 화면에서 컬럼 토글 모드

data-priority 1~6숫자 작을수록 중요 (마지막에 숨김)

priority 생략항상 표시 (식별 컬럼)

ui-responsive table-stripe반응형 + 줄무늬 자동 적용

대안 모드data-mode="reflow" — 세로 풀이

Tags

#jQuery-Mobile #table #columntoggle #data-priority #data-mode #reflow #반응형테이블 #ui-responsive #table-stripe #컬럼토글 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, table, columntoggle, data-priority, data-mode, reflow, 반응형테이블, ui-responsive, table-stripe, 컬럼토글, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리