मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

टेबल

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

अवलोकन

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

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

# प्रथम अंतिम सँभालना
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 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>

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<table class="table table-striped">
  ...
</table>

इन वर्गों को टेबल वेरिएंट में भी जोड़ा जा सकता है:

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<table class="table table-dark table-striped">
  ...
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<table class="table table-success table-striped">
  ...
</table>

होवर करने योग्य पंक्तियाँ

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

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

इन होवर करने योग्य पंक्तियों को धारीदार संस्करण के साथ भी जोड़ा जा सकता है:

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

सक्रिय टेबल

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

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<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>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<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टेबल और सेल के सभी किनारों पर बॉर्डर के लिए जोड़ें ।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<table class="table table-bordered">
  ...
</table>

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

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

सीमाओं के बिना टेबल्स

.table-borderlessसीमाओं के बिना तालिका के लिए जोड़ें ।

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

छोटी मेज

सभी सेल को आधा में काटकर और अधिक कॉम्पैक्ट .table-smबनाने के लिए जोड़ें ।.tablepadding

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<table class="table table-sm">
  ...
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर
<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>

घोंसला करने की क्रिया

बॉर्डर शैलियाँ, सक्रिय शैलियाँ और तालिका प्रकार नेस्टेड तालिकाओं द्वारा इनहेरिट नहीं किए जाते हैं।

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
हैडर हैडर हैडर
प्रथम अंतिम
बी प्रथम अंतिम
सी प्रथम अंतिम
3 लैरी पक्षी @ट्विटर
<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>से एक में लिपटे रहेंगे <tbody>, इस प्रकार हमारे चयनकर्ता इच्छित के अनुसार काम करेंगे।

शरीर रचना

टेबल हेड

टेबल और डार्क टेबल की तरह ही, मॉडिफायर क्लासेस का इस्तेमाल करें .table-lightया हल्का या गहरा ग्रे दिखाने .table-darkके लिए ।<thead>

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

टेबल फुट

# प्रथम अंतिम सँभालना
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
फ़ुटबाल फ़ुटबाल फ़ुटबाल फ़ुटबाल
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

कैप्शन

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

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

<caption>आप टेबल के शीर्ष पर भी रख सकते हैं .caption-top

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

# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

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

# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
# शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक शीर्षक
1 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
2 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
3 कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष कक्ष
<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लाइट और डार्क टेबल वेरिएंट के अलावा, वेरिएबल द्वारा थीम कलर्स को हल्का किया जाता है।