CreatorLMS Editor

.table-product td, .table-product th { white-space:nowrap; }
  .num { text-align:right; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; }
</style>

<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h1 class="h4 mb-1">상품 리스트

</h1>
    <div class="text-muted">다양한 제휴, 이벤트 상품 등의 구성이 가능합니다.</div>
  </div>
  <div>
    <a href="app.php?p=page/product/product_form.html" class="btn btn-primary">
      상품 등록
    </a>
  </div>
</div>

<div class="card mb-3">
  <div class="card-body">
    <div class="filter-stack">
      <div class="filter-rowline">
        <div class="filter-label">검색</div>
        <div class="filter-input">
          <div class="d-flex gap-2 flex-wrap align-items-center">
            <select class="form-select" style="max-width:220px;">
              <option selected># 판매 채널 #</option>
              <option >creator lms</option>
              <option >my_tube</option>
            </select>

<div class="card">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-hover align-middle table-product text-center">
        <thead class="text-muted">
          <tr>
            <th style="width:70px;">번호</th>
            <th>상품명</th>
            <th>월결제액</th>
            <th>년결제액(할인율)</th>
            <th>수수료</th>
            <th>상품수</th>
            <th>용량</th>
            <th>회원수</th>
            <th>수강제한</th>
            <th>관리자제한</th>
            <th>Live계정</th>
            <th style="width:90px;">상세</th>
          </tr>
        </thead>
        <tbody>

<tr>
            <td class="fw-semibold">5</td>
            <td class="fw-semibold">C-Growth</td>
            <td class="num">₩200,000</td>
            <td class="num">₩2,040,000 (15%)</td>
            <td>10%</td>
            <td>10</td>
            <td>200GB</td>
            <td>500</td>
            <td>100</td>
            <td>5</td>
            <td class="mono">118</td>
            <td><a href="app.php?p=page/product/product_view.html" class="btn btn-outline-secondary btn-sm">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">4</td>
            <td class="fw-semibold">C-Advance</td>
            <td class="num">₩300,000</td>
            <td class="num">₩3,060,000 (15%)</td>
            <td>5%</td>
            <td>30</td>
            <td>300GB</td>
            <td>1,000</td>
            <td>200</td>
            <td>10</td>
            <td class="mono">263</td>
            <td><a href="app.php?p=page/product/product_view.html" class="btn btn-outline-secondary btn-sm">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">3</td>
            <td class="fw-semibold">Enterprise</td>
            <td class="num">₩500,000</td>
            <td class="num">₩5,100,000 (15%)</td>
            <td>없음</td>
            <td>무제한</td>
            <td>500GB</td>
            <td>10,000</td>
            <td>무제한</td>
            <td>없음</td>
            <td class="mono">742</td>
            <td><a href="app.php?p=page/product/product_view.html" class="btn btn-outline-secondary btn-sm">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">2</td>
            <td class="fw-semibold">C-Basic</td>
            <td class="num">₩100,000</td>
            <td class="num">₩1,140,000 (5%)</td>
            <td>15%</td>
            <td>5</td>
            <td>100GB</td>
            <td>100</td>
            <td>30</td>
            <td>3</td>
            <td class="mono">31</td>
            <td><a href="app.php?p=page/product/product_view.html" class="btn btn-outline-secondary btn-sm">상세</a></td>
          </tr>

<tr>
            <td class="fw-semibold">1</td>
            <td class="fw-semibold">C-Start</td>
            <td class="num">₩50,000</td>
            <td class="num">₩570,000 (5%)</td>
            <td>30%</td>
            <td>1</td>
            <td>40GB</td>
            <td>20</td>
            <td>10</td>
            <td>1</td>
            <td class="mono">9</td>
            <td><a href="app.php?p=page/product/product_view.html" class="btn btn-outline-secondary btn-sm">상세</a></td>
          </tr>

</tbody>
      </table>
    </div>
  </div>
</div>

간단 소스 편집기