Data Table

OP 목록 테이블 (OP 전용 — PP는 별도 사이트/컴포넌트). thead 회색 밴드 N-50 + 상하 N-200 라인, th 텍스트 N-900, 행 구분선 N-200, 행 hover N-40. 셀은 가운데 정렬, 열 폭은 colgroup 으로 지정.

목록 테이블 (기본) .table · 셀 가운데 정렬 · 행 hover · colgroup 으로 열 폭 지정 
<div class="table-box">
  <!-- 툴바: 건수 + 액션 -->
  <div class="table-toolbar">
    <span class="count">총 <b>5</b>건</span>
    <button type="button" class="btn btn-line">신규등록</button>
  </div>

  <table class="table">
    <colgroup>
      <col style="width: 70px" /> …
    </colgroup>
    <thead>
      <tr><th>순번</th> … </tr>
    </thead>
    <tbody>
      <tr>
        <td>40</td> …
        <td><span class="badge badge-active">사용</span></td>
      </tr>
    </tbody>
  </table>

  <!-- 페이지네이션 -->
  <nav class="pagination">
    <a href="#" class="page-next" aria-label="처음">…</a>
    <a href="#" class="is-active">1</a> …
    <a href="#" class="page-next" aria-label="다음">…</a>
  </nav>
</div>
총 5건
순번 이름 ID 상태 이메일 가입 신청일
40 김정호 alex7392 사용 aaa@avb.com 2025.03.07
39 강수호 maxwell204 발급 12a43@avb.com 2025.03.07
38 구호서 maxwell204 탈퇴 58a79@avb.com 2025.03.07
37 정원영 riley9173 사용중지 aanfn@avb.com 2025.03.07