Bootstrap इत्यनेन सह सारणीनां (जावास्क्रिप्ट् प्लगिन्स् मध्ये तेषां प्रचलितं उपयोगं दृष्ट्वा) ऑप्ट-इन-स्टाइलिंग् कृते दस्तावेजीकरणं उदाहरणानि च ।
उदाहरणानि
पञ्चाङ्गानि तिथिनिर्धारकाणि च इत्यादिषु तृतीयपक्षविजेट्-मध्ये सारणीनां व्यापकप्रयोगस्य कारणात् वयं अस्माकं सारणीः opt-in इति डिजाइनं कृतवन्तः Just add the base class .table
to any <table>
, ततः custom styles इत्यनेन सह विस्तारं कुर्वन्तु अथवा अस्माकं विविधैः समाविष्टैः modifier classes इत्यनेन सह ।
अत्यन्तं मूलभूतं सारणीचिह्नं उपयुज्य, अत्र .table
Bootstrap मध्ये -आधारितसारणीः कथं दृश्यन्ते इति । सर्वाणि सारणीशैल्यानि Bootstrap 4 मध्ये अनुवंशिकानि सन्ति , अर्थात् यत्किमपि नेस्टेड् सारणी मातापितृणां समानरीत्या शैलीकृता भविष्यति ।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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
।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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>
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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>
।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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>
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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
सारणीयाः कोष्ठकानां च सर्वेषु पार्श्वेषु सीमानां कृते योजयन्तु ।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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>
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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-borderless
सीमारहितस्य सारणीयाः कृते योजयन्तु ।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<table class="table table-borderless">
<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-borderless
कृष्णवर्णीयमेजयोः अपि उपयोक्तुं शक्यते ।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<table class="table table-borderless 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>
।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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>
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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
सेल पैडिंग को आधे में काटकर तालिकाओं को अधिक संकुचित बनाने के लिए जोड़ें ।
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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>
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
लैरी द बर्ड |
@ twitter इति |
<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>
नियमितसारणीपृष्ठभूमिरूपान्तराणि कृष्णसारणीया सह उपलब्धानि न सन्ति, तथापि, समानशैल्याः प्राप्तुं पाठस्य अथवा पृष्ठभूमिउपयोगितायाः उपयोगं कर्तुं शक्नुवन्ति ।
# . |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
४ |
कोशिका |
कोशिका |
५ |
कोशिका |
कोशिका |
६ |
कोशिका |
कोशिका |
७ |
कोशिका |
कोशिका |
८ |
कोशिका |
कोशिका |
९ |
कोशिका |
कोशिका |
<!-- 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
कैप्शन
A <caption>
सारणीयाः शीर्षकवत् कार्यं करोति । एतत् स्क्रीन रीडर-युक्तानां उपयोक्तृभ्यः एकं सारणीम् अन्वेष्टुं तथा च तत् किं विषये इति अवगन्तुं साहाय्यं करोति तथा च ते तत् पठितुम् इच्छन्ति वा इति निर्णयं कर्तुं साहाय्यं करोति।
उपयोक्तृणां सूची
# . |
प्रथमः |
अन्तिमः |
वारङ्गः |
१ |
मार्क |
ओटो |
@मडो |
२ |
याकूबः |
थॉर्न्टन इति |
@स्थूलः |
३ |
ल्यारी |
the Bird इति |
@ twitter इति |
<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
a with वेष्टयित्वा सर्वेषु viewports मध्ये किमपि सारणी प्रतिक्रियाशीलं कुर्वन्तु .table-responsive
। अथवा, अधिकतमं विरामबिन्दुं चिनुत येन सह प्रतिक्रियाशीलसारणी भवितव्यं .table-responsive{-sm|-md|-lg|-xl}
.
ऊर्ध्वाधर क्लिपिंग/ट्रंकेशन
प्रतिक्रियाशीलसारणीः , इत्यस्य उपयोगं कुर्वन्ति overflow-y: hidden
, यत् सारणीयाः अधः वा उपरितनधारात् परं गच्छन्तीनां सामग्रीं क्लिप् करोति । विशेषतः, एतेन ड्रॉप्-डाउन-मेनू-इत्यादीनि तृतीय-पक्ष-विजेट्-इत्यादीनि च क्लिप्-ऑफ् कर्तुं शक्यते ।
सदैव प्रतिक्रियाशील
प्रत्येकं ब्रेकपॉइण्ट् पारं, .table-responsive
क्षैतिजरूपेण स्क्रॉल करणीयसारणीनां कृते उपयुज्यताम् ।
# . |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
ब्रेकपॉइंट विशिष्ट
.table-responsive{-sm|-md|-lg|-xl}
विशेषविरामबिन्दुपर्यन्तं प्रतिक्रियाशीलसारणीः निर्मातुं आवश्यकतानुसारं उपयोगं कुर्वन्तु । तस्मात् भङ्गबिन्दुतः उपरि च, सारणी सामान्यतया व्यवहारं करिष्यति न तु क्षैतिजरूपेण स्क्रॉलं करिष्यति ।
एतानि सारणीः यावत् तेषां प्रतिक्रियाशीलशैल्याः विशिष्टदृश्यपोर्टविस्तारेषु न प्रवर्तन्ते तावत् भग्नाः दृश्यन्ते ।
# . |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
# . |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
# . |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
# . |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
शीर्षकम् |
१ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
२ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
३ |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
कोशिका |
<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>