표

행과 열로 비교해야 하는 데이터. 라벨-값 한 쌍씩이면 표가 아니라 라벨-값 목록입니다.

코드

<div class="jt-table-wrap" data-sticky-head>
  <table class="jt-table">
    <thead>
      <tr><th aria-sort="ascending">항목</th><th style="text-align:right">측정값</th></tr>
    </thead>
    <tbody>
      <tr aria-selected="true"><td>내용량</td><td class="jt-num">50.4</td></tr>
      <tr class="jt-table-empty"><td colspan="2">조건에 맞는 결과가 없습니다</td></tr>
    </tbody>
  </table>
</div>
 
<!-- 여러 행을 고른 뒤 뜨는 액션바 -->
<div class="jt-bulkbar">
  <span class="jt-bulkbar-count">2건</span> 선택됨
  <button class="jt-btn-ghost jt-btn-sm">일괄 발행</button>
</div>

하지 말 것

jt-table-wrap 없이 표를 쓰지 마세요. 좁은 화면에서 가로 스크롤이 페이지 전체로 번집니다.
말줄임(.jt-ellipsis)은 표 셀에서만 허용됩니다. 버튼·메뉴·알림에 쓰면 정보가 사라집니다.
어두운 .jt-bulkbar 위 ghost 버튼의 글자색만 바꾸지 마세요 — 흰 배경 + 흰 글자가 됩니다(시스템이 이미 처리해 둡니다).

접근성

숫자열은 class="jt-num" + 우측 정렬 — Figtree의 자릿수 정렬이 적용됩니다
정렬 상태는 aria-sort 속성만 바꾸면 화살표가 자동으로 바뀝니다
data-sticky-head로 스크롤 시 헤더가 고정됩니다

앱에서 모양 바꾸기

jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).

노브: --cell-pad-x --cell-pad-y (밀도 토큰)

.my-page .jt-table { --cell-pad-x: …; }

표

코드

하지 말 것

접근성

앱에서 모양 바꾸기

관련