मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
in English

तालिकाएं

बूटस्ट्रैप कन्नै तालिकाएं दी ऑप्ट-इन स्टाइलिंग आस्तै दस्तावेजीकरण ते उदाहरण (जावास्क्रिप्ट प्लगइन्स च उंदा प्रचलित इस्तेमाल दिक्खदे होई)।

अवलोकन करना

<table>कैलेंडर ते डेट पिकर जनेह् त्रीयें पार्टी विजेटें च तत्वें दे व्यापक इस्तेमाल दे कारण , बूटस्ट्रैप दी तालिकाएं च ऑप्ट-इन ऐ . आधार वर्ग .tableगी कुसै बी च जोड़ो <table>, फिर साढ़े वैकल्पिक संशोधक वर्गें जां कस्टम शैलियें कन्नै विस्तार करो. बूटस्ट्रैप च सारी तालिका शैलियां विरासत च नेईं मिलदियां न, मत��ब कुसै बी नेस्टेड तालिका गी माता-पिता थमां स्वतंत्र शैली कीती जाई सकदी ऐ.

सब्भनें शा बुनियादी तालिका मार्कअप दा इस्तेमाल करदे होई, इत्थै दिक्खेआ गेआ ऐ जे .tableबूटस्ट्रैप च -आधारत तालिकाएं किस चाल्ली दिक्खियां जंदियां न.

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

वेरिएंट

तालिकाएं, तालिका पंक्तियें जां व्यक्तिगत कोशिकाएं गी रंगने आस्तै संदर्भ वर्गें दा उपयोग करो।

जमात हेडिंग करना हेडिंग करना
डिफाल्ट कोठरी कोठरी
मुंढला कोठरी कोठरी
माध्यमिक दा कोठरी कोठरी
कामयाबी कोठरी कोठरी
खतरा कोठरी कोठरी
चेतावनी कोठरी कोठरी
इन्फो कोठरी कोठरी
लो कोठरी कोठरी
न्हेरा कोठरी कोठरी
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
सहायक प्रौद्योगिकियें गी अर्थ संप्रेषित करना

अर्थ जोड़ने आस्तै रंग दा उपयोग करना सिर्फ इक दृश्य संकेत दिंदा ऐ, जेह् ड़ा सहायक तकनीकें दे बरतूनकर्ताएं गी नेईं पजाया जाग – जि’यां स्क्रीन रीडर। एह् सुनिश्चत करो जे रंग कन्नै दर्शाए गेदे जानकारी गी या तां सामग्री थमां गै स्पष्ट ऐ (जियां दिक्खने आह् ला पाठ), जां वैकल्पिक साधनें राहें शामल कीता जा, जि’यां .visually-hiddenवर्ग कन्नै छिपे दा अतिरिक्त पाठ।

उच्चारण तालिकाएं

धारीदार पंक्तियां

.table-stripedदे अंदर कुसै बी तालिका पंक्ति च ज़ेबरा-स्ट्राइपिंग जोड़ने लेई इस्तेमाल करो <tbody>.

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-striped">
  ...
</table>

इनें वर्गें गी तालिका वेरिएंटें च बी जोड़ेआ जाई सकदा ऐ:

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-striped">
  ...
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-success table-striped">
  ...
</table>

मंडराईल पंक्तियां

.table-hoverइक दे अंदर तालिका पंक्तियें पर इक होवर स्थिति गी सक्षम करने आस्तै जोड़ो <tbody>.

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-hover">
  ...
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-hover">
  ...
</table>

इनें होवरेबल पंक्तियें गी धारीदार वेरिएंट कन्नै बी जोड़ेआ जाई सकदा ऐ :

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-striped table-hover">
  ...
</table>

सक्रिय तालिकाएं

.table-activeक्लास जोड़ियै इक तालिका पंक्ति जां सेल गी हाइलाइट करो ।

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

वेरिएंट ते एक्सेंट टेबल किस चाल्ली कम्म करदे न ?

उच्चारण तालिकाएं ( धारीदार पंक्तियां , होवरेबल पंक्तियां , ते सक्रिय तालिकाएं ) आस्तै , असें किश तकनीकें दा इस्तेमाल कीता तां जे इनें प्रभावें गी अपने सारे तालिका रूपें आस्तै कम्म कीता जाई सकै :

  • अस --bs-table-bgकस्टम प्रॉपर्टी कन्नै इक टेबल सेल दी बैकग्राउंड सेट करने कन्नै शुरू करदे आं। सारे तालिका वेरिएंट उसदे बाद उस कस्टम गुण गी तालिका कोशिकाएं गी रंगने आस्तै सेट करदे न. इस चाल्ली, जेकर अर्ध-पारदर्शी रंगें गी टेबल बैकग्राउंड दे रूप च इस्तेमाल कीता जंदा ऐ तां अस मुसीबत च नेईं पौंदे।
  • फिर अस टेबल सेल पर इक इनसेट बॉक्स शैडो जोड़ने आं जिसदे कन्नै box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);कुसै बी निर्दिष्ट दे उप्पर टू लेयर background-color. क्योंकि असीं इक विशाल फैलाव दा इस्तेमाल करदे हां ते कोई धब्बा नहीं, रंग एकरस होग। चूंकि --bs-table-accent-bgडिफ़ॉल्ट रूप कन्नै अनसेट ऐ , इसलेई साढ़े कोल डिफ़ॉल्ट बॉक्स शैडो नेईं ऐ ।
  • जदूं या तां .table-striped, .table-hoverजां .table-activeवर्गें गी जोड़ेआ जंदा ऐ, --bs-table-accent-bgतां पृष्ठभूमि गी रंगने आस्तै इक अर्धपारदर्शी रंग पर सेट कीता जंदा ऐ.
  • हर तालिका वेरिएंट आस्तै, अस --bs-table-accent-bgउस रंग दे आधार उप्पर इक उच्चतम विपरीत रंग पैदा करदे आं । मसलन, लहजे दा रंग .table-primaryगहरा ऐ जिसलै के .table-darkहल्के उच्चारण रंग ऐ।
  • पाठ ते सीमा रंग इक गै चाल्लीं पैदा कीते जंदे न, ते उंदे रंग डिफाल्ट रूप कन्नै विरासत च होंदे न.

परदे दे पिच्छे एह् दिक्खने गी मिलदा ऐ:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

तालिका सीमाएं

सीमाबद्ध टेबल

.table-borderedतालिका ते कोशिकाएं दे सारे पास्सै सीमाएं आस्तै जोड़ो ।

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-bordered">
  ...
</table>

रंग बदलने लेई सीमा रंग उपयोगिताएं गी जोड़ेआ जाई सकदा ऐ:

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-bordered border-primary">
  ...
</table>

बिना सीमाएं दे टेबल

.table-borderlessबिना सीमाएं दे टेबल लेई जोड़ो ।

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-borderless">
  ...
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-borderless">
  ...
</table>

छोटी-छोटी टेबल

सारे कोशिकाएं गी आधे च कट्टियै .table-smकुसै बी होर कॉम्पैक्ट बनाने आस्तै जोड़ो ।.tablepadding

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-sm">
  ...
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-sm">
  ...
</table>

ऊर्ध्वाधर संरेखण

दी तालिका कोशिकाएं <thead>गी हमेशा निचले हिस्से च खड़ी संरेखित कीता जंदा ऐ। तालिका कोशिकाएं च <tbody>उंदी संरेखण थमां विरासत च मिलदी ऐ <table>ते डिफ़ॉल्ट रूप कन्नै शीर्शक कन्नै संरेखित कीते गेदे न. जित्थें लोड़ होए उत्थें दुबारा संरेखित करने आस्तै ऊर्ध्वाधर संरेखण वर्गें दा इस्तेमाल करो .

शीर्षक 1 दा हेडिंग 2 दा हेडिंग 3 दा हेडिंग 4 दा
एह् कोशिका vertical-align: middle;तालिका थमां विरासत च लैंदी ऐ एह् कोशिका vertical-align: middle;तालिका थमां विरासत च लैंदी ऐ एह् कोशिका vertical-align: middle;तालिका थमां विरासत च लैंदी ऐ एह् इत्थै किश प्लेसहोल्डर पाठ ऐ , जिसदा मकसद काफी हद तगर खड़ी जगह लैना ऐ , एह् दस्सने आस्तै जे पिछले कोशिकाएं च ऊर्ध्वाधर संरेखण किस चाल्ली कम्म करदा ऐ ।
एह् कोशिका vertical-align: bottom;तालिका पंक्ति थमां विरासत च लैंदा ऐ एह् कोशिका vertical-align: bottom;तालिका पंक्ति थमां विरासत च लैंदा ऐ एह् कोशिका vertical-align: bottom;तालिका पंक्ति थमां विरासत च लैंदा ऐ एह् इत्थै किश प्लेसहोल्डर पाठ ऐ , जिसदा मकसद काफी हद तगर खड़ी जगह लैना ऐ , एह् दस्सने आस्तै जे पिछले कोशिकाएं च ऊर्ध्वाधर संरेखण किस चाल्ली कम्म करदा ऐ ।
एह् कोशिका vertical-align: middle;तालिका थमां विरासत च लैंदी ऐ एह् कोशिका vertical-align: middle;तालिका थमां विरासत च लैंदी ऐ एह् कोशिका शीर्शक कन्नै संरेखित ऐ । एह् इत्थै किश प्लेसहोल्डर पाठ ऐ , जिसदा मकसद काफी हद तगर खड़ी जगह लैना ऐ , एह् दस्सने आस्तै जे पिछले कोशिकाएं च ऊर्ध्वाधर संरेखण किस चाल्ली कम्म करदा ऐ ।
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

घोंसला बनाना

सीमा शैलियां, सक्रिय शैलियां, ते तालिका वेरिएंट नेस्टेड तालिकाएं आसेआ विरासत च नेईं हासल कीते जंदे न.

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
हेडर हेडर हेडर
इक पैहला अंतम
बी पैहला अंतम
सी पैहला अंतम
लैरी ने दी चिड़िया दा @ ट्विटर पर
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

घोंसला बनाने दा कम्म किस चाल्ली होंदा ऐ

नेस्टेड तालिकाएं च कुसै बी शैली गी लीक होने थमां रोकने आस्तै , अस >अपने CSS च चाइल्ड कम्बिएनेटर ( ) चयनकर्ता दा इस्तेमाल करदे आं. चूंकि असेंगी , , ते च सारे tdएस ते thएस गी निशाना बनाने दी लोड़ ऐ , इस करी साढ़ा चयनकर्ता इसदे बगैर काफी लंबा दिक्खना होग। इस चाल्ली, अस , दे सारे s ते s गी निशाना बनाने आस्तै बल्के विषम दिखने आह् ले चयनकर्ता दा उपयोग करदे आं , पर कुसै बी संभावित नेस्टेड तालिकाएं च कोई बी नेईं।theadtbodytfoot.table > :not(caption) > * > *tdth.table

ध्यान रक्खो जेकर तुस <tr>s गी कुसै तालिका दे सीधे बच्चें दे रूप च जोड़दे ओ तां ओह् डिफ़ॉल्ट रूप कन्नै <tr>a च लपेटे दे होङन , इस चाल्ली साढ़े चयनकर्ताएं गी इरादा दे मताबक कम्म करदे न.<tbody>

शरीर रचना विज्ञान

टेबल सिर

तालिकाएं ते गहरे रंगें दी तालिकाएं दे समान, संशोधक वर्गें दा इस्तेमाल करो .table-lightजां s गी हल्के जां गहरे धूसर रंग दे प्रदर्शत .table-darkकरने आस्तै .<thead>

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी ने दी चिड़िया दा @ ट्विटर पर
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी ने दी चिड़िया दा @ ट्विटर पर
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

टेबल पैर

# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी ने दी चिड़िया दा @ ट्विटर पर
पाद लेख पाद लेख पाद लेख पाद लेख
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

कैप्शन

<caption>इक तालिका आस्तै इक हेडिंग दी तर्ज पर कम्म करदा ऐ। एह् स्क्रीन रीडर आह् ले बरतूनी गी इक तालिका गी ढूँढने ते एह् समझने च मदद करदा ऐ जे एह् किस गल्लै दे बारे च ऐ ते फैसला करदा ऐ जे ओह् इसगी पढ़ना चांह् दे न जां नेईं।

बरतूनी दी सूची
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी द बर्ड @ ट्विटर पर
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

तुस <caption>टेबल दे उपर गी बी .caption-top.

बरतूनी दी सूची
# ऐ पैहला अंतम हैंडल
मार्क करो ओटो ने दी @ एमडीओ
याकूब दा थॉर्नटन ने दी @मुट्टा
लैरी ने दी चिड़िया दा @ ट्विटर पर
<table class="table caption-top">
  <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|-xxl}.

ऊर्ध्वाधर कतरन / कटौती करना

प्रतिक्रियाशील तालिकाएं दा इस्तेमाल कीता जंदा ऐ overflow-y: hidden, जेह् ड़ी कुसै बी सामग्री गी क्लिप करदी ऐ जेह् ड़ी तालिका दे निचले जां शीर्शक किनारे थमां परे ऐ । खास करियै, एह् ड्रॉपडाउन मेनू ते होर त्रीयें पार्टी विजेटें गी क्लिप करी सकदा ऐ।

हमेशा जवाबदेही

हर ब्रेकपॉइंट दे पार, .table-responsiveक्षैतिज रूप कन्नै स्क्रॉल करने आह् ली तालिकाएं आस्तै इस्तेमाल करो।

# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ब्रेकपॉइंट विशिष्ट

.table-responsive{-sm|-md|-lg|-xl|-xxl}इक खास ब्रेकपॉइंट तगर प्रतिक्रियाशील तालिकाएं बनाने लेई जरूरत मताबक इस्तेमाल करो . उस ब्रेकपॉइंट थमां ते उप्पर, तालिका सामान्य रूप कन्नै व्यवहार करग ते क्षैतिज रूप कन्नै स्क्रॉल नेईं करग।

एह् तालिकाएं उस बेल्लै तगर टूटी दिक्खी सकदियां न जदूं तगर उंदी प्रतिक्रियाशील शैलियां विशिष्ट दृष्टिकोण चौड़ाई पर लागू नेईं होंदियां न.

# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
# ऐ हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना हेडिंग करना
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी कोठरी
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xxl">
  <table class="table">
    ...
  </table>
</div>

सस्स

चर करने वाले

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

घरबाई

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

अनुकूलित करना

  • तालिका वेरिएंटें च विपरीतता गी निर्धारत करने लेई कारक चर ( $table-striped-bg-factor, $table-active-bg-factor& ) दा इस्तेमाल कीता जंदा ऐ।$table-hover-bg-factor
  • लाइट & डार्क टेबल वेरिएंट दे अलावा, थीम रंगें गी $table-bg-levelचर द्वारा हल्का कीता जंदा ऐ।