ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನೊಂದಿಗೆ ಟೇಬಲ್ಗಳ ಆಯ್ಕೆ-ಸ್ಟೈಲಿಂಗ್ಗಾಗಿ ದಾಖಲೆಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ಗಳಲ್ಲಿ ಅವುಗಳ ಪ್ರಚಲಿತ ಬಳಕೆಯನ್ನು ನೀಡಲಾಗಿದೆ).
ಈ ಪುಟದಲ್ಲಿ
ಅವಲೋಕನ
ಕ್ಯಾಲೆಂಡರ್ಗಳು ಮತ್ತು ದಿನಾಂಕ ಪಿಕ್ಕರ್ಗಳಂತಹ ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್ಗಳಾದ್ಯಂತ ಎಲಿಮೆಂಟ್ಗಳ ವ್ಯಾಪಕ ಬಳಕೆಯಿಂದಾಗಿ <table>, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಕೋಷ್ಟಕಗಳು ಆಯ್ಕೆಯಾಗಿವೆ . ಬೇಸ್ ಕ್ಲಾಸ್ .tableಅನ್ನು ಯಾವುದಕ್ಕೂ ಸೇರಿಸಿ <table>, ನಂತರ ನಮ್ಮ ಐಚ್ಛಿಕ ಪರಿವರ್ತಕ ತರಗತಿಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ಶೈಲಿಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಿ. ಎಲ್ಲಾ ಟೇಬಲ್ ಶೈಲಿಗಳು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಆನುವಂಶಿಕವಾಗಿಲ್ಲ, ಅಂದರೆ ಯಾವುದೇ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್ಗಳನ್ನು ಪೋಷಕರಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು.
ಅತ್ಯಂತ ಮೂಲಭೂತ ಟೇಬಲ್ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, .tableಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ-ಆಧಾರಿತ ಕೋಷ್ಟಕಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.
#
ಪ್ರಥಮ
ಕೊನೆಯದು
ಹ್ಯಾಂಡಲ್
1
ಮಾರ್ಕ್
ಒಟ್ಟೊ
@mdo
2
ಜಾಕೋಬ್
ಥಾರ್ನ್ಟನ್
@ಕೊಬ್ಬು
3
ಲ್ಯಾರಿ ಬರ್ಡ್
@twitter
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
ರೂಪಾಂತರಗಳು
ಬಣ್ಣ ಕೋಷ್ಟಕಗಳು, ಟೇಬಲ್ ಸಾಲುಗಳು ಅಥವಾ ಪ್ರತ್ಯೇಕ ಕೋಶಗಳಿಗೆ ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
ವರ್ಗ
ಶಿರೋನಾಮೆ
ಶಿರೋನಾಮೆ
ಡೀಫಾಲ್ಟ್
ಕೋಶ
ಕೋಶ
ಪ್ರಾಥಮಿಕ
ಕೋಶ
ಕೋಶ
ದ್ವಿತೀಯ
ಕೋಶ
ಕೋಶ
ಯಶಸ್ಸು
ಕೋಶ
ಕೋಶ
ಅಪಾಯ
ಕೋಶ
ಕೋಶ
ಎಚ್ಚರಿಕೆ
ಕೋಶ
ಕೋಶ
ಮಾಹಿತಿ
ಕೋಶ
ಕೋಶ
ಬೆಳಕು
ಕೋಶ
ಕೋಶ
ಕತ್ತಲು
ಕೋಶ
ಕೋಶ
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು
ಅರ್ಥವನ್ನು ಸೇರಿಸಲು ಬಣ್ಣವನ್ನು ಬಳಸುವುದು ದೃಶ್ಯ ಸೂಚನೆಯನ್ನು ಮಾತ್ರ ಒದಗಿಸುತ್ತದೆ, ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ರವಾನೆಯಾಗುವುದಿಲ್ಲ. ಬಣ್ಣದಿಂದ ಸೂಚಿಸಲಾದ ಮಾಹಿತಿಯು ವಿಷಯದಿಂದಲೇ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (ಉದಾ ಗೋಚರ ಪಠ್ಯ), ಅಥವಾ .visually-hiddenವರ್ಗದೊಂದಿಗೆ ಮರೆಮಾಡಲಾಗಿರುವ ಹೆಚ್ಚುವರಿ ಪಠ್ಯದಂತಹ ಪರ್ಯಾಯ ವಿಧಾನಗಳ ಮೂಲಕ ಸೇರಿಸಲಾಗಿದೆ.
ಉಚ್ಚಾರಣಾ ಕೋಷ್ಟಕಗಳು
ಪಟ್ಟೆ ಸಾಲುಗಳು
.table-stripedಒಳಗೆ ಯಾವುದೇ ಟೇಬಲ್ ಸಾಲಿಗೆ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸಲು ಬಳಸಿ <tbody>.
--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ಹಗುರವಾದ ಉಚ್ಚಾರಣಾ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಪಠ್ಯ ಮತ್ತು ಗಡಿ ಬಣ್ಣಗಳನ್ನು ಒಂದೇ ರೀತಿಯಲ್ಲಿ ರಚಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಬಣ್ಣಗಳನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲಾಗುತ್ತದೆ.
ನ ಟೇಬಲ್ ಕೋಶಗಳು <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;ಮೇಜಿನಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ
ಈ ಕೋಶವನ್ನು ಮೇಲ್ಭಾಗಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ.
ಇದು ಇಲ್ಲಿ ಕೆಲವು ಪ್ಲೇಸ್ಹೋಲ್ಡರ್ ಪಠ್ಯವಾಗಿದೆ, ಹಿಂದಿನ ಕೋಶಗಳಲ್ಲಿ ಲಂಬ ಜೋಡಣೆಯು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸ್ವಲ್ಪ ಲಂಬ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
ಗೂಡುಕಟ್ಟುವ
ಬಾರ್ಡರ್ ಶೈಲಿಗಳು, ಸಕ್ರಿಯ ಶೈಲಿಗಳು ಮತ್ತು ಟೇಬಲ್ ರೂಪಾಂತರಗಳು ನೆಸ್ಟೆಡ್ ಟೇಬಲ್ಗಳಿಂದ ಆನುವಂಶಿಕವಾಗಿಲ್ಲ.
ನೆಸ್ಟೆಡ್ ಟೇಬಲ್ಗಳಿಗೆ ಯಾವುದೇ ಶೈಲಿಗಳು ಸೋರಿಕೆಯಾಗದಂತೆ ತಡೆಯಲು , ನಾವು >ನಮ್ಮ CSS ನಲ್ಲಿ ಚೈಲ್ಡ್ ಕಾಂಬಿನೇಟರ್ ( ) ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ. , , ಮತ್ತು ನಲ್ಲಿರುವ ಎಲ್ಲಾ tds ಮತ್ತು ಗಳನ್ನು ನಾವು ಗುರಿಯಾಗಿಸಿಕೊಳ್ಳಬೇಕಾಗಿರುವುದರಿಂದ , ನಮ್ಮ ಆಯ್ಕೆದಾರ ಅದು ಇಲ್ಲದೆ ಬಹಳ ಉದ್ದವಾಗಿ ಕಾಣುತ್ತದೆ. ಅದರಂತೆ, ಎಲ್ಲಾ s ಮತ್ತು ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಾವು ಬೆಸವಾಗಿ ಕಾಣುವ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ , ಆದರೆ ಯಾವುದೇ ಸಂಭಾವ್ಯ ನೆಸ್ಟೆಡ್ ಟೇಬಲ್ಗಳಿಲ್ಲ.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
ನೀವು <tr>ಟೇಬಲ್ನ ನೇರ ಮಕ್ಕಳಂತೆ s ಅನ್ನು ಸೇರಿಸಿದರೆ, ಅವುಗಳನ್ನು ಡೀಫಾಲ್ಟ್ <tr>ಆಗಿ ಸುತ್ತಿಡಲಾಗುತ್ತದೆ <tbody>, ಹೀಗಾಗಿ ನಮ್ಮ ಆಯ್ಕೆದಾರರು ಉದ್ದೇಶಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ.
ಅಂಗರಚನಾಶಾಸ್ತ್ರ
ಟೇಬಲ್ ಹೆಡ್
ಟೇಬಲ್ಗಳು ಮತ್ತು ಡಾರ್ಕ್ ಟೇಬಲ್ಗಳಂತೆಯೇ, ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ಬಳಸಿ .table-lightಅಥವಾ .table-darkಗಳನ್ನು <thead>ತಿಳಿ ಅಥವಾ ಗಾಢ ಬೂದು ಬಣ್ಣದಲ್ಲಿ ಕಾಣುವಂತೆ ಮಾಡಿ.
ಒಂದು <caption>ಟೇಬಲ್ಗಾಗಿ ಶಿರೋನಾಮೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಟೇಬಲ್ ಅನ್ನು ಹುಡುಕಲು ಮತ್ತು ಅದರ ಬಗ್ಗೆ ಏನೆಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅವರು ಅದನ್ನು ಓದಲು ಬಯಸುತ್ತಾರೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಬಳಕೆದಾರರ ಪಟ್ಟಿ
#
ಪ್ರಥಮ
ಕೊನೆಯದು
ಹ್ಯಾಂಡಲ್
1
ಮಾರ್ಕ್
ಒಟ್ಟೊ
@mdo
2
ಜಾಕೋಬ್
ಥಾರ್ನ್ಟನ್
@ಕೊಬ್ಬು
3
ಲ್ಯಾರಿ ಬರ್ಡ್
@twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
<caption>ನೀವು ಮೇಜಿನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸಹ ಹಾಕಬಹುದು .caption-top.
ಬಳಕೆದಾರರ ಪಟ್ಟಿ
#
ಪ್ರಥಮ
ಕೊನೆಯದು
ಹ್ಯಾಂಡಲ್
1
ಮಾರ್ಕ್
ಒಟ್ಟೊ
@mdo
2
ಜಾಕೋಬ್
ಥಾರ್ನ್ಟನ್
@ಕೊಬ್ಬು
3
ಲ್ಯಾರಿ
ಪಕ್ಷಿ
@twitter
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="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ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲಿಂಗ್ ಕೋಷ್ಟಕಗಳಿಗಾಗಿ ಬಳಸಿ.
.table-responsive{-sm|-md|-lg|-xl|-xxl}ನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ವರೆಗೆ ಸ್ಪಂದಿಸುವ ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸಲು ಅಗತ್ಯವಿರುವಂತೆ ಬಳಸಿ . ಆ ಬ್ರೇಕ್ಪಾಯಿಂಟ್ನಿಂದ ಮತ್ತು ಮೇಲಕ್ಕೆ, ಟೇಬಲ್ ಸಾಮಾನ್ಯವಾಗಿ ವರ್ತಿಸುತ್ತದೆ ಮತ್ತು ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರಾಲ್ ಆಗುವುದಿಲ್ಲ.
ನಿರ್ದಿಷ್ಟ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲಗಳಲ್ಲಿ ಅವುಗಳ ಸ್ಪಂದಿಸುವ ಶೈಲಿಗಳು ಅನ್ವಯಿಸುವವರೆಗೆ ಈ ಕೋಷ್ಟಕಗಳು ಮುರಿದಂತೆ ಕಾಣಿಸಬಹುದು.