Source

പട്ടികകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് പട്ടികകൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും (ജാവാസ്ക്രിപ്റ്റ് പ്ലഗിനുകളിൽ അവയുടെ പ്രചാരത്തിലുള്ള ഉപയോഗം കണക്കിലെടുക്കുമ്പോൾ).

ഉദാഹരണങ്ങൾ

കലണ്ടറുകളും തീയതി പിക്കറുകളും പോലെയുള്ള മൂന്നാം കക്ഷി വിജറ്റുകളിലുടനീളം ടേബിളുകളുടെ വ്യാപകമായ ഉപയോഗം കാരണം, തിരഞ്ഞെടുക്കാവുന്ന തരത്തിൽ ഞങ്ങൾ പട്ടികകൾ രൂപകൽപ്പന ചെയ്‌തു . അടിസ്ഥാന ക്ലാസ് .tableഏതെങ്കിലും ഒന്നിലേക്ക് ചേർക്കുക <table>, തുടർന്ന് ഇഷ്‌ടാനുസൃത ശൈലികൾ അല്ലെങ്കിൽ ഞങ്ങളുടെ ഉൾപ്പെടുത്തിയിരിക്കുന്ന വിവിധ മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിച്ച് വിപുലീകരിക്കുക.

ഏറ്റവും അടിസ്ഥാന ടേബിൾ മാർക്ക്അപ്പ് ഉപയോഗിച്ച്, .tableബൂട്ട്‌സ്‌ട്രാപ്പിൽ അധിഷ്‌ഠിത പട്ടികകൾ എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ. എല്ലാ ടേബിൾ ശൈലികളും ബൂട്ട്‌സ്‌ട്രാപ്പ് 4-ൽ പാരമ്പര്യമായി ലഭിക്കുന്നു , അതായത് എല്ലാ നെസ്റ്റഡ് ടേബിളുകളും പാരന്റ് സ്‌റ്റൈൽ ചെയ്യുന്ന രീതിയിലായിരിക്കും.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ഇരുണ്ട പശ്ചാത്തലത്തിൽ ലൈറ്റ് ടെക്‌സ്‌റ്റ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിറങ്ങൾ വിപരീതമാക്കാനും കഴിയും .table-dark.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ടേബിൾ ഹെഡ് ഓപ്ഷനുകൾ

ടേബിളുകൾക്കും ഡാർക്ക് ടേബിളുകൾക്കും സമാനമായി, മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിക്കുക അല്ലെങ്കിൽ .thead-lightകൾ ഇളം അല്ലെങ്കിൽ ഇരുണ്ട ചാരനിറത്തിൽ ദൃശ്യമാക്കുക..thead-dark<thead>

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

വരയുള്ള വരികൾ

.table-stripedഎന്നതിനുള്ളിലെ ഏതെങ്കിലും ടേബിൾ വരിയിലേക്ക് സീബ്രാ-സ്ട്രിപ്പിംഗ് ചേർക്കാൻ ഉപയോഗിക്കുക <tbody>.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ബോർഡർ മേശ

.table-borderedപട്ടികയുടെയും സെല്ലുകളുടെയും എല്ലാ വശങ്ങളിലും ബോർഡറുകൾക്കായി ചേർക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

അതിരുകളില്ലാത്ത മേശ

.table-borderlessബോർഡറുകളില്ലാത്ത ഒരു ടേബിളിനായി ചേർക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlessഇരുണ്ട മേശകളിലും ഉപയോഗിക്കാം.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ഹോവർ ചെയ്യാവുന്ന വരികൾ

.table-hoverഒരു ഉള്ളിലെ പട്ടിക വരികളിൽ ഒരു ഹോവർ അവസ്ഥ പ്രവർത്തനക്ഷമമാക്കാൻ ചേർക്കുക <tbody>.

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

ചെറിയ മേശ

.table-smസെൽ പാഡിംഗ് പകുതിയായി മുറിച്ച് പട്ടികകൾ കൂടുതൽ ഒതുക്കമുള്ളതാക്കാൻ ചേർക്കുക .

# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി ദി ബേർഡ് @ട്വിറ്റർ 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

സന്ദർഭോചിതമായ ക്ലാസുകൾ

പട്ടിക വരികൾ അല്ലെങ്കിൽ വ്യക്തിഗത സെല്ലുകൾ വർണ്ണിക്കാൻ സന്ദർഭോചിതമായ ക്ലാസുകൾ ഉപയോഗിക്കുക.

ക്ലാസ് തലക്കെട്ട് തലക്കെട്ട്
സജീവമാണ് സെൽ സെൽ
സ്ഥിരസ്ഥിതി സെൽ സെൽ
പ്രാഥമികം സെൽ സെൽ
സെക്കൻഡറി സെൽ സെൽ
വിജയം സെൽ സെൽ
അപായം സെൽ സെൽ
മുന്നറിയിപ്പ് സെൽ സെൽ
വിവരം സെൽ സെൽ
വെളിച്ചം സെൽ സെൽ
ഇരുട്ട് സെൽ സെൽ 
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

ഡാർക്ക് ടേബിളിനൊപ്പം റെഗുലർ ടേബിൾ ബാക്ക്ഗ്രൗണ്ട് വേരിയന്റുകൾ ലഭ്യമല്ല, എന്നിരുന്നാലും, സമാന ശൈലികൾ നേടാൻ നിങ്ങൾക്ക് ടെക്‌സ്‌റ്റോ ബാക്ക്‌ഗ്രൗണ്ട് യൂട്ടിലിറ്റിയോ ഉപയോഗിക്കാം.

# തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ
2 സെൽ സെൽ
3 സെൽ സെൽ
4 സെൽ സെൽ
5 സെൽ സെൽ
6 സെൽ സെൽ
7 സെൽ സെൽ
8 സെൽ സെൽ
9 സെൽ സെൽ 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
സഹായ സാങ്കേതികവിദ്യകളുടെ അർത്ഥം അറിയിക്കുന്നു

അർത്ഥം ചേർക്കാൻ വർണ്ണം ഉപയോഗിക്കുന്നത് ഒരു വിഷ്വൽ സൂചന നൽകുന്നു, അത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായ സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് കൈമാറില്ല. വർണ്ണത്താൽ സൂചിപ്പിക്കുന്ന വിവരങ്ങൾ ഉള്ളടക്കത്തിൽ നിന്ന് തന്നെ വ്യക്തമാണെന്ന് ഉറപ്പാക്കുക (ഉദാ: ദൃശ്യമായ ടെക്‌സ്‌റ്റ്), അല്ലെങ്കിൽ .sr-onlyക്ലാസിനൊപ്പം മറച്ചിരിക്കുന്ന അധിക വാചകം പോലെയുള്ള ഇതര മാർഗങ്ങളിലൂടെ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.

യഥാക്രമം 576px, 768px, 992px, 1120px വരെയുള്ള ഓരോ ബ്രേക്ക്‌പോയിന്റിലും .tableടേബിൾ .table-responsive{-sm|-md|-lg|-xl}തിരശ്ചീനമായി സ്‌ക്രോൾ ചെയ്യുന്നതാക്കി മാറ്റിക്കൊണ്ട് പ്രതികരിക്കുന്ന പട്ടികകൾ സൃഷ്‌ടിക്കുക .max-width

ബ്രൗസറുകൾ നിലവിൽ റേഞ്ച് സന്ദർഭ അന്വേഷണങ്ങളെ പിന്തുണയ്‌ക്കാത്തതിനാൽ min-,max- ഈ താരതമ്യങ്ങൾക്കായി ഉയർന്ന കൃത്യതയോടെ മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഫ്രാക്ഷണൽ വീതികളുള്ള (ഉദാഹരണത്തിന്, ഉയർന്ന ഡിപിഐ ഉപകരണങ്ങളിൽ ചില വ്യവസ്ഥകളിൽ ഇത് സംഭവിക്കാം) പ്രിഫിക്‌സുകളുടെയും വ്യൂപോർട്ടുകളുടെയും പരിമിതികളിൽ ഞങ്ങൾ പ്രവർത്തിക്കുന്നു. .

അടിക്കുറിപ്പുകൾ

<caption>ഒരു ടേബിളിനുള്ള തലക്കെട്ട് പോലെയാണ് എ പ്രവർത്തിക്കുന്നത്. സ്‌ക്രീൻ റീഡറുള്ള ഉപയോക്താക്കളെ ഒരു ടേബിൾ കണ്ടെത്താനും അത് എന്തിനെക്കുറിച്ചാണെന്ന് മനസ്സിലാക്കാനും അത് വായിക്കണോ എന്ന് തീരുമാനിക്കാനും ഇത് സഹായിക്കുന്നു.

ഉപയോക്താക്കളുടെ പട്ടിക
# ആദ്യം അവസാനത്തെ കൈകാര്യം ചെയ്യുക
1 അടയാളപ്പെടുത്തുക ഓട്ടോ @mdo
2 ജേക്കബ് തോൺടൺ @കൊഴുപ്പ്
3 ലാറി പക്ഷി @ട്വിറ്റർ 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

പ്രതികരിക്കുന്ന പട്ടികകൾ

റെസ്‌പോൺസീവ് ടേബിളുകൾ ടേബിളുകൾ തിരശ്ചീനമായി സ്‌ക്രോൾ ചെയ്യാൻ അനുവദിക്കുന്നു. .tableഉപയോഗിച്ച് പൊതിഞ്ഞ് എല്ലാ വ്യൂപോർട്ടുകളിലുടനീളം ഏത് പട്ടികയും പ്രതികരിക്കുന്നതാക്കുക .table-responsive. അല്ലെങ്കിൽ, ഉപയോഗിച്ച് ഒരു റെസ്‌പോൺസീവ് ടേബിൾ ഉണ്ടായിരിക്കാൻ പരമാവധി ബ്രേക്ക്‌പോയിന്റ് തിരഞ്ഞെടുക്കുക .table-responsive{-sm|-md|-lg|-xl}.

ലംബമായ ക്ലിപ്പിംഗ്/വെട്ടൽ

റെസ്‌പോൺസീവ് ടേബിളുകൾ ഉപയോഗപ്പെടുത്തുന്നു overflow-y: hidden, ഇത് പട്ടികയുടെ താഴെയോ മുകളിലോ ഉള്ള അരികുകൾക്കപ്പുറത്തേക്ക് പോകുന്ന ഏതൊരു ഉള്ളടക്കത്തെയും ക്ലിപ്പ് ചെയ്യുന്നു. പ്രത്യേകിച്ചും, ഇതിന് ഡ്രോപ്പ്ഡൗൺ മെനുകളും മറ്റ് മൂന്നാം കക്ഷി വിജറ്റുകളും ക്ലിപ്പ് ചെയ്യാൻ കഴിയും.

എപ്പോഴും പ്രതികരിക്കുന്നു

എല്ലാ ബ്രേക്ക്‌പോയിന്റിലും, .table-responsiveതിരശ്ചീനമായി സ്‌ക്രോളിംഗ് ടേബിളുകൾക്കായി ഉപയോഗിക്കുക.

# തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
2 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
3 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ബ്രേക്ക്‌പോയിന്റ് നിർദ്ദിഷ്ടം

.table-responsive{-sm|-md|-lg|-xl}ഒരു പ്രത്യേക ബ്രേക്ക്‌പോയിന്റ് വരെ പ്രതികരിക്കുന്ന പട്ടികകൾ സൃഷ്‌ടിക്കാൻ ആവശ്യാനുസരണം ഉപയോഗിക്കുക . ആ ബ്രേക്ക്‌പോയിന്റിൽ നിന്നും മുകളിലേക്കും, ടേബിൾ സാധാരണ രീതിയിൽ പ്രവർത്തിക്കും, തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യില്ല.

നിർദ്ദിഷ്ട വ്യൂപോർട്ട് വീതിയിൽ അവയുടെ പ്രതികരണ ശൈലികൾ ബാധകമാകുന്നതുവരെ ഈ പട്ടികകൾ തകർന്നതായി കാണപ്പെടാം.

# തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
2 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
3 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
2 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
3 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
2 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
3 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട് തലക്കെട്ട്
1 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
2 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ
3 സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ സെൽ 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>