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

तालिकाएँ

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

अवलोकन

<table>कैलेंडर आ डेट पिकर जैना तृतीय पक्ष विजेट भर मे तत्वक कें व्यापक उपयोग कें कारण , बूटस्ट्रैप कें टेबल ऑप्ट-इन छै . .tableकोनो मे बेस क्लास जोड़ू <table>, फेर हमर वैकल्पिक संशोधक वर्ग या कस्टम शैली क संग विस्तारित करू. बूटस्ट्रैप मे सबटा टेबल स्टाइल विरासत मे नहि भेटल अछि, मतलब कोनो नेस्टेड टेबल कए अभिभावक स स्वतंत्र रूप स स्टाइल कैल जा सकैत अछि ।

सबसे बेसिक टेबल मार्कअप कें उपयोग करयत, एतय .table-आधारित टेबल बूटस्ट्रैप मे कोना देखयत छै.

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<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>.

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-striped">
  ...
</table>

धारीदार स्तंभ

.table-striped-columnsकोनों तालिका स्तंभ मे ज़ेबरा-स्ट्राइपिंग जोड़य कें लेल उपयोग करूं .

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-striped-columns">
  ...
</table>

इ वर्गक कें तालिका वेरिएंट मे सेहो जोडल जा सकय छै:

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-striped">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-striped-columns">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-success table-striped">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-success table-striped-columns">
  ...
</table>

मंडराइत पंक्तियाँ

.table-hoverएकटा के भीतर तालिका पंक्ति पर एकटा होवर स्थिति सक्षम करबाक लेल जोड़ू <tbody>.

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-hover">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-hover">
  ...
</table>

ई होवरेबल पंक्तियऽ क॑ धारीदार पंक्तियऽ के वेरिएंट के साथ भी जोड़लऽ जाब॑ सकै छै:

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-striped table-hover">
  ...
</table>

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

.table-activeएकटा क्लास जोड़ि कए कोनो टेबल पंक्ति या सेल कए हाइलाइट करू ।

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<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>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<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);तखन हम कोनो निर्दिष्ट के ऊपर to layer के संग टेबल सेल पर एकटा इनसेट बॉक्स छाया जोड़ैत छी background-color. कारण हम एकटा विशाल स्प्रेड आ कोनो ब्लर के प्रयोग करैत छी, रंग एकरस होयत। चूँकि --bs-table-accent-bgडिफ़ॉल्ट रूप सँ अनसेट अछि, हमरा सभ लग डिफ़ॉल्ट बॉक्स छाया नहि अछि ।
  • जब॑ या त॑ .table-striped, .table-striped-columns, .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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

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

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

.table-borderedतालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-bordered">
  ...
</table>

रंग बदलबाक लेल सीमा रंग उपयोगिता जोड़ल जा सकैत अछि:

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

बिना सीमा के टेबल

.table-borderlessबिना सीमा के टेबल के लेल जोड़ू ।

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-borderless">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-borderless">
  ...
</table>

छोट-छोट टेबुल

सब कोशिका के आधा मे काटि क कोनो आओर कॉम्पैक्ट .table-smबनेबाक लेल मिला दियौ ।.tablepadding

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-sm">
  ...
</table>
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
<table class="table table-dark table-sm">
  ...
</table>

तालिका समूह विभाजक

एकटा मोट सीमा जोड़ू, तालिका समूहक बीच गहरे रंगक— <thead>, <tbody>, आ <tfoot>—क संग .table-group-divider। रंग बदलि कए अनुकूलित करू border-top-color(जेकरा लेल हम एखन एहि समय कोनो उपयोगिता वर्ग नहि प्रदान करैत छी) ।

# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी द बर्ड @ ट्विटर पर
एचटीएमएल
<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 class="table-group-divider">
    <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>

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

के तालिका कोशिका <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>

घोंसला बनाना

सीमा शैली, सक्रिय शैली, आओर तालिका वेरिएंट नेस्टेड तालिका द्वारा विरासत मे नहि भेटैत अछि.

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

नेस्टिंग कोना काज करैत अछि

नेस्टेड टेबल म॑ कोनो भी स्टाइल क॑ लीक होय स॑ रोकै लेली , हम्मं॑ >अपनऽ CSS म॑ चाइल्ड कॉम्बिनेटर ( ) चयनकर्ता के उपयोग करै छियै । चूँकि हमरा सभकेँ , , आ ,मे सभटा tds आ ths केँ लक्षित करबाक आवश्यकता अछि , हमर चयनकर्ता एकर बिना काफी लम्बा लागत । ऐन्हऽ म॑, हम , के सब s आरू s क॑ लक्षित करै लेली बल्कि विषम दिखै वाला चयनकर्ता के उपयोग करै छियै , लेकिन कोनो संभावित नेस्टेड तालिका म॑ स॑ कोय भी नै ।theadtbodytfoot.table > :not(caption) > * > *tdth.table

ध्यान रहे कि अगर आप <tr>s क॑ कोनो टेबल केरऽ डायरेक्ट चिल्ड्रेन के रूप म॑ जोड़ै छियै त॑ वू डिफ़ॉल्ट रूप स॑ <tr>a म॑ लपेटलऽ जैतै , जेकरा स॑ हमरऽ चयनकर्ता इरादा के अनुसार काम करतै ।<tbody>

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

टेबल हेड

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

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

टेबल पैर

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

कैप्शन

<caption>टेबल के लेल हेडिंग के तरह काज करैत अछि. इ स्क्रीन रीडर वाला उपयोगकर्ताक कें एकटा टेबल खोजय मे मदद करय छै आ इ समझय मे मदद करय छै की इ की बारे मे छै आ इ तय करय मे मदद करय छै की ओ ओकरा पढ़य चाहय छै या नहि.

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

अहां <caption>टेबुल के ऊपर के संग सेहो राखि सकय छी .caption-top.

उपयोगकर्ताओं की सूची
# 2019। पहिल अंतिम संभालनाइ
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी चिड़ै के @ ट्विटर पर
एचटीएमएल
<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क्षैतिज रूप सं स्क्रॉल करय वाला तालिकाक कें लेल उपयोग करूं.

# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

.table-responsive{-sm|-md|-lg|-xl|-xxl}कोनों विशेष ब्रेकपॉइंट तइक रिस्पांसिव टेबल बनावा कें लेल जरूरत कें अनुसार उपयोग करूं . ओहि ब्रेकपॉइंट सं आओर ऊपर, टेबल सामान्य व्यवहार करत आओर क्षैतिज रूप सं स्क्रॉल नहि करत.

ई तालिकाक टूटल प्रतीत भ सकय छै जखन तइक ओकर प्रतिक्रियाशील शैली विशिष्ट दृश्यपोर्ट चौड़ाई पर लागू नै भ जायत.

# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# 2019। शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
<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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$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-scaleचर द्वारा हल्का कयल गेल अछि |