Source

टेबल्स

दस्तऐवजीकरण आणि टेबल्सच्या स्टाइलची निवड करण्यासाठी उदाहरणे (जावास्क्रिप्ट प्लगइनमध्ये त्यांचा प्रचलित वापर दिल्याने) बूटस्ट्रॅपसह.

उदाहरणे

कॅलेंडर आणि तारीख निवडक यांसारख्या तृतीय-पक्ष विजेट्सवर सारण्यांच्या व्यापक वापरामुळे, आम्ही आमची सारणी निवडण्यासाठी डिझाइन केली आहे . फक्त बेस क्लास .tableकोणत्याही मध्ये जोडा <table>, नंतर कस्टम शैली किंवा आमच्या विविध समाविष्ट सुधारक वर्गांसह विस्तारित करा.

सर्वात मूलभूत टेबल मार्कअप वापरून, .tableबूटस्ट्रॅपमध्ये आधारित सारण्या कशा दिसतात ते येथे आहे. सर्व सारणी शैली Bootstrap 4 मध्ये वारशाने मिळतात , याचा अर्थ कोणतीही नेस्टेड टेबल्स पॅरेंट प्रमाणेच स्टाईल केली जातील.

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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.

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @mdo
2 जेकब थॉर्नटन @फॅट
3 लॅरी पक्षी @ट्विटर
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>.

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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टेबल आणि सेलच्या सर्व बाजूंच्या सीमांसाठी जोडा .

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>.

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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सेल पॅडिंग अर्ध्यामध्ये कापून टेबल अधिक कॉम्पॅक्ट करण्यासाठी जोडा .

# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>

गडद सारणीसह नियमित सारणी पार्श्वभूमी रूपे उपलब्ध नाहीत, तथापि, समान शैली प्राप्त करण्यासाठी तुम्ही मजकूर किंवा पार्श्वभूमी उपयुक्तता वापरू शकता.

# मथळा मथळा
१ सेल सेल
2 सेल सेल
3 सेल सेल
4 सेल सेल
५ सेल सेल
6 सेल सेल
७ सेल सेल
8 सेल सेल
९ सेल सेल 
<!-- 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>कार्य. हे स्क्रीन रीडर असलेल्या वापरकर्त्यांना टेबल शोधण्यात आणि ते कशाबद्दल आहे हे समजून घेण्यात आणि त्यांना ते वाचायचे आहे का ते ठरवण्यात मदत करते.

वापरकर्त्यांची यादी
# पहिला शेवटचा हाताळा
१ खूण करा ओटो @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>

प्रतिसाद सारण्या

रिस्पॉन्सिव्ह टेबल्स सहजतेने टेबल्स क्षैतिजरित्या स्क्रोल करण्याची परवानगी देतात. कोणत्याही टेबलला सर्व व्ह्यूपोर्टवर a .tableसह रॅप करून प्रतिसादात्मक बनवा .table-responsive. किंवा, वापरून जास्तीत जास्त ब्रेकपॉईंट निवडा ज्यामध्ये प्रतिसाद तक्ता असेल .table-responsive{-sm|-md|-lg|-xl}.

अनुलंब क्लिपिंग/ट्रंकेशन

रिस्पॉन्सिव्ह टेबल्सचा वापर करतात overflow-y: hidden, जे टेबलच्या तळाशी किंवा वरच्या कडांच्या पलीकडे जाणारी कोणतीही सामग्री काढून टाकते. विशेषतः, हे ड्रॉपडाउन मेनू आणि इतर तृतीय-पक्ष विजेट बंद करू शकते.

नेहमी प्रतिसाद

प्रत्येक ब्रेकपॉइंटवर, .table-responsiveक्षैतिज स्क्रोलिंग टेबलसाठी वापरा.

# मथळा मथळा मथळा मथळा मथळा मथळा मथळा मथळा मथळा
१ सेल सेल सेल सेल सेल सेल सेल सेल सेल
2 सेल सेल सेल सेल सेल सेल सेल सेल सेल
3 सेल सेल सेल सेल सेल सेल सेल सेल सेल 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

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

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

# मथळा मथळा मथळा मथळा मथळा
१ सेल सेल सेल सेल सेल
2 सेल सेल सेल सेल सेल
3 सेल सेल सेल सेल सेल
# मथळा मथळा मथळा मथळा मथळा
१ सेल सेल सेल सेल सेल
2 सेल सेल सेल सेल सेल
3 सेल सेल सेल सेल सेल
# मथळा मथळा मथळा मथळा मथळा
१ सेल सेल सेल सेल सेल
2 सेल सेल सेल सेल सेल
3 सेल सेल सेल सेल सेल
# मथळा मथळा मथळा मथळा मथळा
१ सेल सेल सेल सेल सेल
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>