Bulma CSS ফ্রেমওয়ার্কে টেবিল তৈরি করা অত্যন্ত সহজ, এবং এটি Responsive Tables এবং Scrollable Tables তৈরি করার জন্য বেশ কিছু সুবিধা প্রদান করে। এই ধরনের টেবিল সাধারণত মোবাইল এবং ডেস্কটপ ভিউতে ভালোভাবে কাজ করে এবং বড় ডেটা টেবিলকে স্ক্রলযোগ্য বা রেসপন্সিভ করে তোলে।
এখানে Bulma ব্যবহার করে Responsive Tables এবং Scrollable Tables তৈরি করার পদ্ধতি আলোচনা করা হচ্ছে।
১. Responsive Tables
Responsive tables এমন টেবিল যা ছোট স্ক্রীনে (যেমন মোবাইল ডিভাইসে) নিজেকে স্কেল করে ফেলে বা horizontal scrolling ব্যবহার করে টেবিলের কন্টেন্ট দেখায়। Bulma এর table-container ক্লাস ব্যবহার করে এটি সহজে তৈরি করা যায়।
Responsive Table এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
<div class="container">
<h1 class="title">Responsive Table</h1>
<div class="table-container">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
<td>Software Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>San Francisco</td>
<td>Designer</td>
</tr>
<tr>
<td>George Brown</td>
<td>45</td>
<td>Los Angeles</td>
<td>Project Manager</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
table-containerক্লাস: এটি টেবিলের চারপাশে একটি কনটেইনার তৈরি করে, যা মোবাইল ডিভাইসে স্ক্রলিং সক্ষম করে।is-bordered,is-striped,is-narrow,is-hoverable,is-fullwidth: এগুলি Bulma টেবিলের ভিন্ন ভিন্ন স্টাইলিং ক্লাস। এগুলোর মাধ্যমে টেবিলের সীমা, স্ট্রাইপড রো, হোভার স্টাইল, এবং পুরো প্রস্থ ব্যবহার করা হয়।
এটি একটি রেসপন্সিভ টেবিল তৈরি করবে, যেখানে বড় স্ক্রীনে টেবিল সাধারণভাবে প্রদর্শিত হবে, এবং ছোট স্ক্রীনে স্ক্রলযোগ্য হয়ে যাবে।
২. Scrollable Tables
Scrollable tables ব্যবহার করা হয় যখন টেবিলের কন্টেন্ট খুব বড় হয় এবং আপনি চাইছেন যে টেবিলের কলামগুলো স্ক্রল না হয়ে শুধু রো (লাইন) গুলো স্ক্রল করুক। Bulma তে স্ক্রলেবল টেবিল তৈরি করার জন্য সাধারণত overflow-x: auto; ব্যবহার করা হয়।
Scrollable Table এর উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
.scrollable-table {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Scrollable Table</h1>
<div class="scrollable-table">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Occupation</th>
<th>Country</th>
<th>Salary</th>
<th>Experience</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
<td>Software Developer</td>
<td>USA</td>
<td>$80,000</td>
<td>5 years</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>34</td>
<td>San Francisco</td>
<td>Designer</td>
<td>USA</td>
<td>$70,000</td>
<td>6 years</td>
</tr>
<tr>
<td>George Brown</td>
<td>45</td>
<td>Los Angeles</td>
<td>Project Manager</td>
<td>USA</td>
<td>$90,000</td>
<td>10 years</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
scrollable-tableক্লাস: এই ক্লাসেoverflow-x: auto;ব্যবহার করা হয়েছে, যা টেবিলের কন্টেন্টটি যদি খুব বড় হয় তবে টেবিলের নিচে স্ক্রলবার প্রদর্শিত হবে।max-width: 100%;: এটি নিশ্চিত করে যে টেবিলটি পেজের প্রস্থে যতটুকু জায়গা রয়েছে ততটুকু জায়গা দখল করবে।-webkit-overflow-scrolling: touch;: এই প্রপার্টিটি মোবাইল ডিভাইসে স্ক্রলিংকে স্মুথ করে তোলে।
এটি একটি স্ক্রলেবল টেবিল তৈরি করবে, যেখানে আপনি বড় টেবিলের কন্টেন্ট হরিজন্টালি স্ক্রল করতে পারবেন।
৩. রেসপন্সিভ টেবিলের জন্য অতিরিক্ত কাস্টমাইজেশন
যখন টেবিলের কন্টেন্ট খুব বড় হয় এবং রেসপন্সিভ ডিজাইনে আনা প্রয়োজন হয়, তখন নিচের কিছু অতিরিক্ত কাস্টমাইজেশন ব্যবহার করতে পারেন:
৩.১. টেবিলের কলামগুলি রেসপন্সিভ বানানো
আপনি যদি টেবিলের কলামগুলির সংখ্যা কমাতে চান মোবাইল ডিভাইসে, তবে আপনি media queries ব্যবহার করে টেবিলের কিছু কলাম hidden করে দিতে পারেন।
@media screen and (max-width: 768px) {
.table td:nth-child(n+4) {
display: none;
}
}
এটি মোবাইল ডিভাইসে টেবিলের প্রথম ৩টি কলাম দেখাবে এবং বাকি কলামগুলো গোপন করবে।
সারাংশ
Bulma ফ্রেমওয়ার্কে Responsive Tables এবং Scrollable Tables তৈরি করা বেশ সহজ। Responsive Tables টেবিলের কন্টেন্টকে ছোট স্ক্রীনে হরিজন্টালি স্ক্রলযোগ্য করে তোলে এবং Scrollable Tables ব্যবহার করে বড় টেবিলের কন্টেন্টের জন্য স্ক্রলিং সক্ষম করা যায়। Bulma এর table-container ক্লাস এবং CSS overflow-x: auto; এর মাধ্যমে আপনি সহজেই এই ধরনের টেবিল তৈরি করতে পারেন। এই ফিচারগুলো ব্যবহার করে আপনি আপনার ওয়েবসাইটে বড় ডেটা টেবিলগুলোকে মোবাইল ফ্রেন্ডলি এবং ইউজার-বান্ধব করতে পারবেন।
Read more
