বুটস্ট্রাপ ৫-এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ। যখন আপনার টেবিলটি মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত না হয়, তখন এটি রেসপন্সিভ টেবিলের মাধ্যমে স্ক্রিনের আকার অনুযায়ী অটো স্ক্রল হতে পারে বা টেবিলটি স্ক্রলযোগ্য হয়ে ওঠে। বুটস্ট্রাপ ৫ টেবিলের জন্য table-responsive ক্লাস প্রদান করে, যা টেবিলকে ছোট স্ক্রীনে সঠিকভাবে প্রদর্শিত হতে সহায়তা করে।
রেসপন্সিভ টেবিল তৈরি করার উপাদান
- টেবিল কনটেইনার: রেসপন্সিভ টেবিলের জন্য একটি
divকনটেইনার ব্যবহার করতে হয় যাtable-responsiveক্লাস ধারণ করবে। - টেবিল কন্টেন্ট:
tableক্লাস দিয়ে সাধারণ টেবিল তৈরি করতে হবে, যেমন:thead,tbody,tr,th, এবংtd। - স্ক্রলযোগ্য টেবিল: ছোট স্ক্রীনে টেবিল স্ক্রল করার জন্য
table-responsiveক্লাসটি কনটেইনারের সাথে যোগ করতে হয়।
উদাহরণ: রেসপন্সিভ টেবিল তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>রেসপন্সিভ টেবিল উদাহরণ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- রেসপন্সিভ টেবিল -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">নাম</th>
<th scope="col">বয়স</th>
<th scope="col">শহর</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>রাহুল</td>
<td>২৫</td>
<td>ঢাকা</td>
</tr>
<tr>
<th scope="row">2</th>
<td>সুমি</td>
<td>৩০</td>
<td>চট্টগ্রাম</td>
</tr>
<tr>
<th scope="row">3</th>
<td>মাহমুদ</td>
<td>৩৫</td>
<td>রাজশাহী</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ব্যাখ্যা:
table-responsiveক্লাস:table-responsiveক্লাসটিdivকনটেইনারে ব্যবহার করা হয়েছে, যা ছোট স্ক্রীনে টেবিলটি স্ক্রলযোগ্য করে তোলে। এটি সাধারণত মোবাইল ডিভাইসে টেবিলের কলামগুলোকে সঠিকভাবে প্রদর্শনের জন্য উপযুক্ত। যখন স্ক্রীন সাইজ ছোট হবে (যেমন মোবাইল ডিভাইস), তখন টেবিলটি সাইড-টু-সাইড স্ক্রল হবে।
tableক্লাস:- বুটস্ট্রাপের
tableক্লাসটি সাধারণ টেবিল স্টাইলিং প্রদান করে যেমন সীমানা, ব্যাকগ্রাউন্ড এবং টেক্সট এলাইনমেন্ট।
- বুটস্ট্রাপের
রেসপন্সিভ টেবিলের ব্যবহার
রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রে কিছু অতিরিক্ত বিষয়গুলো খেয়াল রাখতে হয়:
- এডভান্সড স্টাইলিং: আপনি
table-striped,table-bordered,table-hoverইত্যাদি ক্লাস যোগ করে টেবিলের স্টাইল কাস্টমাইজ করতে পারেন।table-striped: রিজার্ভড রো শেডিং (ছোট/বিশাল লাইন বিভাজন)।table-bordered: টেবিলের চারপাশে সীমানা যোগ করে।table-hover: টেবিলের রোতে হোভার ইফেক্ট যোগ করে।
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<!-- টেবিল কন্টেন্ট -->
</table>
</div>
- ফিক্সড হেডার: যদি আপনার টেবিলের হেডার বড় হয় এবং আপনি স্ক্রলিং এর সময় হেডারটি ফিক্সড রাখতে চান, তবে আপনি কিছু CSS কোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
.table-responsive {
max-height: 400px;
overflow-y: auto;
}
এই কোডের মাধ্যমে আপনি টেবিলের শরীর স্ক্রলযোগ্য করতে পারেন, কিন্তু হেডারটি স্থির থাকবে।
সারাংশ
বুটস্ট্রাপ ৫ এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয়ভাবে স্ক্রীন আকারের সাথে খাপ খাইয়ে যায়। table-responsive ক্লাসটি ছোট স্ক্রীনে টেবিলকে স্ক্রলযোগ্য করে তোলে, যা একটি সেরা ব্যবহারকারী অভিজ্ঞতা প্রদান করে। আপনি অতিরিক্ত কাস্টমাইজেশন যেমন টেবিলের স্টাইল, ফিক্সড হেডার, এবং আরও অনেক কিছু যোগ করতে পারেন।
Read more
