Responsive Tables बनाना
Wide tables layout तोड़ने की बजाय छोटी screens पर horizontally scrollable बन जाती हैं।
In this page:
Syntax
<div class="table-responsive">
<table class="table">...</table>
</div>Responsive Tables
एक .table को .table-responsive में wrap करें (या सिर्फ md से नीचे scroll करने के लिए .table-responsive-md)। Bootstrap tables .table-striped, .table-hover, .table-bordered, .table-sm, और colour variants भी offer करती हैं। mobile के लिए columns की संख्या reasonable रखें।
Note:
table-responsive सिर्फ ज़रूरत पड़ने पर एक horizontal scrollbar add करता है।
उदाहरण: Responsive tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead><tr><th>#</th><th>Name</th><th>Role</th><th>City</th><th>Email</th><th>Joined</th></tr></thead>
<tbody>
<tr><td>1</td><td>Ada</td><td>Engineer</td><td>London</td><td>[email protected]</td><td>2024-01-05</td></tr>
<tr><td>2</td><td>Linus</td><td>Maintainer</td><td>Portland</td><td>[email protected]</td><td>2024-02-11</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- responsive wrapper भूल जाना
- phones के लिए बहुत ज़्यादा columns
- table element पर table-responsive रखना
चैप्टर सारांश
- एक wrapper पर table-responsive
- Breakpoint versions exist करते हैं
- table-striped और table-hover rows style करते हैं
- Wrapper, table खुद नहीं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: