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या s के हल्का भा गहिरा ग्रे रंग के देखावे .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-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क्लास के साथ छिपल अतिरिक्त पाठ।

.tableके साथ कौनों भी के लपेट के रिस्पांसिव टेबल बनाईं .table-responsive{-sm|-md|-lg|-xl}, टेबल के हर max-widthब्रेकपॉइंट पर क्रम से 576px, 768px, 992px, आ 1120px तक ले (लेकिन एह में शामिल ना कइल गइल) पर क्षैतिज रूप से स्क्रॉल करीं।

ध्यान दीं कि चूँकि ब्राउजर वर्तमान में रेंज संदर्भ क्वेरी के सपोर्ट ना करे लें , हमनी के उपसर्ग सभ के सीमा सभ के आसपास काम करे लीं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 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
# भोजपुरी में पढ़ें: हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा
1 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
2 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
3 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
# भोजपुरी में पढ़ें: हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा
1 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
2 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
3 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
# भोजपुरी में पढ़ें: हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा हेडिंग के बा
1 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
2 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
3 के बा कक्ष कक्ष कक्ष कक्ष कक्ष
<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>