PP-가이드-Data Table

Data Table

PP 테이블은 2종 — List Table (.table) 목록형 · Data Table (.info-table) 정의형(상세). 공통: 라벨/헤더 밴드 P-100, 라벨·헤더 텍스트 N-600, 값 텍스트 N-900, 구분선 N-100. 표 폭은 Figma 실제 비율 그대로 — 넘치면 좌우 스크롤.

List Table (.table) 목록형 · 보라 thead(radius 20) · 셀 가운데 정렬 · 행 hover(N-40) · ID는 마스킹(.td-id) · 상태는 텍스트 · colgroup 으로 열 폭 지정

<table class="table">
  <colgroup><col style="width: 60px" /> …</colgroup>
  <thead><tr><th>순번</th> … </tr></thead>
  <tbody>
    <tr>
      <td>10</td><td>김정호</td>
      <td class="td-id">
        <span class="td-id-inner" data-id="alex77578"
          ><span class="id-text">alex77****</span
          ><i class="ico ico-contents-hide id-mask-toggle"></i
        ></span>
      </td>
      <td>디지털사업부</td><td>ABC Card</td>
      <td>신청</td> …
    </tr>
  </tbody>
</table>

순번	이름	ID	부서명	담당업무	상태	가입 신청일	이메일	휴대폰번호	최초 로그인	최근 로그인	상태변경일
10	김정호	alex77578	디지털사업부	ABC Card	신청	2025.03.07	aaa@avb.com	010-1234-5678	2026.11.28 12:14	2026.11.28 12:14	2025.03.07
9	김정호	alex77****	디지털사업부	ABC Card	신청	2025.03.07	aaa@avb.com	010-1234-5678	2026.11.28 12:14	2026.11.28 12:14	2025.03.07
8	김정호	alex77****	디지털사업부	ABC Card	신청	2025.03.07	aaa@avb.com	010-1234-5678	2026.11.28 12:14	2026.11.28 12:14	2025.03.07
7	김정호	alex77****	디지털사업부	ABC Card	신청	2025.03.07	aaa@avb.com	010-1234-5678	2026.11.28 12:14	2026.11.28 12:14	2025.03.07

Data Table (.info-table) 정의형(상세) · [라벨 th | 값 td] 그리드 · 라벨 P-100·N-600 · 값 N-900(흰 배경) · 상태 = 셀렉트박스 + 변경 · 긴 값은 colspan 전체폭 · 필수 입력 = 라벨 뒤 *(Primary)

<table class="info-table">
  <tbody>
    <tr>
      <th scope="row">계정 생성일</th><td>2026.11.28</td>
      <th scope="row">최초 로그인</th><td>2024.01.14 09:20</td>
    </tr>
    <tr>
      <!-- 필수 입력: 라벨 뒤 <span class="req">*</span> (Primary 별표) -->
      <th scope="row">ID <span class="req">*</span></th><td>rainyday2075</td>
      <th scope="row">상태</th>
      <td><div class="td-with-btn"><div class="select-box">…</div><button class="btn btn-line">변경</button></div></td>
    </tr>
    <tr>
      <th scope="row">요청내용 <span class="req">*</span></th>
      <td colspan="3"><div class="textarea"><textarea class="textarea-field" maxlength="300"></textarea><p class="textarea-count"><b>0</b> / 300</p></div></td>
    </tr>
  </tbody>
</table>

계정 생성일	2026.11.28	최초 로그인	2024.01.14 09:20
최근 로그인	2024.01.14 09:20	상태 변경일	2025.03.07
이름	정주인	구분	파트너
ID *	rainyday2075	상태	사용 사용중지 탈퇴
이메일	anbhdufng@abccard.com	직통번호	02-1234-5896
요청내용 *	0 / 300