서울시 공직자 윤리업무 시스템

데이터 없음 (no-data)

.no-data

• 데이터 추가: 테스트 행 표시와 데이터 없음 숨김 확인
• 데이터 삭제: 테스트 행 제거와 데이터 없음 표시 확인

역할별 열 너비

.cell-num (8ch) / .cell-check (9ch) / .cell-date (13ch) / .cell-datetime (19ch) / .cell-range (23ch) / .cell-title (25%, min 20ic) / .cell-note (min 20ic)

셀 너비 설정에 역할별·최소 글자 수별·퍼센트 class 사용

비율별 열 너비

.cell-size-5p (xsm) / .cell-size-10p (sm) / .cell-size-15p / .cell-size-20p (md) / .cell-size-25p / .cell-size-30p (lg) / .cell-size-35p / .cell-size-40p (xlg) / .cell-size-45p / .cell-size-50p (half)

한글 글자 수별 최소 열 너비

.cell-min-size-5ic / .cell-min-size-10ic / .cell-min-size-15ic / .cell-min-size-20ic / .cell-min-size-25ic / .cell-min-size-30ic

• 한글 중심 자유 문구 열: 필요한 글자 수 단계 사용
• 비율 배분 추가: .cell-size-*p 함께 사용
• 역할별 열: 해당 .cell-* 역할 class 우선 사용
• 영문·숫자 혼합 값: 실제 글자 너비에 따라 수용 글자 수 차이

열 너비 조합

.cell-title.cell-size-70p / .cell-date.cell-size-15p / .cell-min-size-10ic.cell-size-20p / .cell-min-size-15ic.cell-size-25p

• 역할별 최소 너비와 비율 배분: .cell-*와 .cell-size-*p 함께 사용
• 한글 글자 수별 최소 너비와 비율 배분: .cell-min-size-*ic와 .cell-size-*p 함께 사용
• 좁은 영역: 역할별 또는 한글 글자 수별 최소 너비 유지

처리 없음

문제 상황

긴 값 전체 표시와 가로 스크롤 확인.

한 줄 말줄임 · 열 너비 양보

.cell-wrap

• 표시: 한 줄 말줄임과 다른 열의 너비 확보
• 적용 구조: 셀 안쪽 요소 한 겹 추가

한 줄 말줄임

.cell-clamp

지정한 열 너비 안에서 한 줄 말줄임 사용.

여러 줄 말줄임

.cell-clamp .cell-clamp-2 / .cell-clamp .cell-clamp-3

• 긴 값: 두 줄 또는 세 줄까지 표시 후 말줄임 사용

셀 안 요소가 여럿일 때

.cell-wrap > *:not(.tag)

• 본문: 한 줄 말줄임 사용
• 태그: 전체 표시
• 가로 배치: .cell-group 함께 사용

말줄임 없이 전부 표시

.cell-break

표 안의 링크 · 행동

.cell-link / .btn.btn-text

• 다른 페이지의 상세 화면 이동: 링크 요소와 .cell-link 사용
• 모달 열기·현재 화면 작업: 버튼 요소와 .btn.btn-text 사용

목록 안 고정 머리글

.table-wrap / .table-sticky-head / --table-sticky-head-visible-row-count

• 스크롤 중 머리글 유지: 표 wrapper에 .table-sticky-head 사용
• 기본 표시 범위: 한 줄 콘텐츠 기준 5행 사용
• 표시 범위를 넘는 행: 표 안 세로 스크롤 사용
• 표시 행 수 변경: 표 wrapper의 inline style에 --table-sticky-head-visible-row-count: 3;처럼 행 수 지정
• 여러 줄 콘텐츠로 늘어난 행: 별도 높이 보정 없음

class 기준

열 제목 기준