រំលងទៅខ្លឹមសារ

តារាងប្រៀបធៀប

ដាក់វត្ថុពីរ ឬច្រើនតាមលក្ខណៈវិនិច្ឆ័យដូចគ្នា ដើម្បីឃើញថាអ្វីមាន អ្វីគ្មាន។

ការបង្ហាញព័ត៌មាន

មើលជាមុនផ្ទាល់

ប្រភព

<div class="dc-cmp" role="region" aria-label="요금제 비교 표" tabindex="0">
  <table class="dc-cmp__table">
    <caption class="dc-cmp__cap">요금제별로 되는 것과 안 되는 것</caption>
    <thead>
      <tr>
        <th scope="col" class="dc-cmp__corner">기능</th>
        <th scope="col">무료</th>
        <th scope="col" class="dc-cmp__best">프로</th>
        <th scope="col">팀</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">만들 수 있는 문서</th>
        <td>3개까지</td>
        <td class="dc-cmp__best">무제한</td>
        <td>무제한</td>
      </tr>
      <tr>
        <th scope="row">워터마크 없는 내보내기</th>
        <td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td class="dc-cmp__best"><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
        <td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
      </tr>
      <tr>
        <th scope="row">지난 버전 보관</th>
        <td>7일</td>
        <td class="dc-cmp__best">30일</td>
        <td>180일</td>
      </tr>
      <tr>
        <th scope="row">권한 나누기</th>
        <td><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td class="dc-cmp__best"><span class="dc-cmp__no" aria-hidden="true">–</span><span class="dc-sr">안 됩니다</span></td>
        <td><span class="dc-cmp__yes" aria-hidden="true">✓</span><span class="dc-sr">됩니다</span></td>
      </tr>
      <tr>
        <th scope="row">문의 답변</th>
        <td>메일</td>
        <td class="dc-cmp__best">평일 당일</td>
        <td>전담 담당자</td>
      </tr>
    </tbody>
  </table>
</div>
.dc-cmp { overflow-x:auto; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-cmp__table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:14px; }
.dc-cmp__cap { padding:var(--dc-3) var(--dc-4); text-align:left; font-size:14px; font-weight:700; color:var(--dc-text); }
.dc-cmp__table th, .dc-cmp__table td { padding:var(--dc-3) var(--dc-4); border-top:1px solid var(--dc-line); text-align:left; vertical-align:top; color:var(--dc-text-sub); }
.dc-cmp__table thead th { background:var(--dc-sunken); color:var(--dc-text); font-size:13px; white-space:nowrap; }
.dc-cmp__table tbody th { color:var(--dc-text); font-weight:600; }
.dc-cmp__table tbody th, .dc-cmp__corner { position:sticky; left:0; z-index:1; background:var(--dc-surface); box-shadow:1px 0 0 var(--dc-line); }
.dc-cmp__best { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-cmp__yes { color:var(--dc-ok); font-weight:700; }
.dc-cmp__no { color:var(--dc-text-mute); }

របៀបប្រើ

  • រៀបជួរតាមលំដាប់ដែលអ្នកអានចង់ដឹងមុន; លក្ខណៈសម្រេចចិត្តដាក់នៅលើគេ
  • កន្លែងណាមានតម្លៃពិត សូមសរសេរតម្លៃ — ដល់ទៅ៣ — ជំនួសសញ្ញាធីក
  • លើសបួនជួរឈរ សូមឲ្យរមូរទទឹង ហើយខ្ទាស់ជួរឈរទីមួយ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

  • កុំសង់តារាងពី div; th និង scope ទេដែលប្រាប់ថាប្រអប់ណាជាអ្វី
  • សញ្ញាធីកតែម្នាក់ឯងគ្មានអត្ថន័យពេលអានឡើង — បន្ថែមអក្សរ មាន ឬ គ្មាន ក្នុង dc-sr

បន្ទាប់