Pure.CSS: Responsive Tables তৈরি করা
Pure.CSS-এ Responsive Tables তৈরি করা খুবই সহজ এবং কার্যকরী। ওয়েব ডেভেলপমেন্টে টেবিল একটি সাধারণ উপাদান, কিন্তু অনেক সময় টেবিলের কন্টেন্ট ছোট স্ক্রীনে যেমন মোবাইল বা ট্যাবলেটে সঠিকভাবে দেখানো কঠিন হয়। Pure.CSS এর সাহায্যে, আপনি সহজেই রেস্পন্সিভ টেবিল তৈরি করতে পারবেন যা সমস্ত স্ক্রীনে সঠিকভাবে প্রদর্শিত হবে।
Responsive Tables তৈরি করার জন্য Pure.CSS এর পদ্ধতি
Pure.CSS টেবিলগুলোর জন্য একটি সহজ ও কার্যকরী স্টাইল প্রদান করে, কিন্তু যদি আপনি চাইলে টেবিলগুলো রেস্পন্সিভ করার জন্য আরও কিছু কাস্টম স্টাইল যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি টেবিল তৈরি করা হয়েছে এবং এটি মোবাইল ডিভাইসে রেস্পন্সিভভাবে কাজ করবে।
Pure.CSS এর মাধ্যমে একটি সাধারণ টেবিল তৈরি করা
১. সাধারণ টেবিল উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Responsive Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>
<h1>Sample Table</h1>
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
এখানে Pure.CSS এর pure-table ক্লাস ব্যবহার করা হয়েছে, যা টেবিলের জন্য সাধারণ স্টাইল প্রয়োগ করবে। এই টেবিলটি ডেস্কটপে সঠিকভাবে দেখাবে, কিন্তু মোবাইলে ছোট হয়ে যাবে এবং ব্যবহারকারীর পক্ষে পড়া কঠিন হতে পারে।
২. Responsive Table তৈরি করা
টেবিলকে রেস্পন্সিভ বানাতে, আপনাকে overflow এর সাহায্যে টেবিলটি স্ক্রলেবল করতে হবে, যাতে মোবাইল বা ছোট স্ক্রীনে এটি ঠিকভাবে দেখা যায়। Pure.CSS-এর জন্য একটি সাধারণ কৌশল হল টেবিলকে একটি কনটেইনারের মধ্যে রেখে, কনটেইনারটিকে overflow-x: auto দিয়ে স্ক্রলযোগ্য করা।
৩. Responsive Table Example:
<!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://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Ensure table scrolls horizontally on small screens */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}
</style>
</head>
<body>
<h1>Responsive Table</h1>
<div class="table-container">
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
<tr>
<td>James</td>
<td>35</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Alice</td>
<td>28</td>
<td>Boston</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
.table-container: একটি কনটেইনার তৈরি করা হয়েছে, যা overflow-x: auto সেট করা হয়েছে। এটি ছোট স্ক্রীনে টেবিলকে স্ক্রলযোগ্য করে তোলে।-webkit-overflow-scrolling: touch;: iOS ডিভাইসে স্ন্যাপি স্ক্রলিং সক্ষম করতে এই স্টাইলটি যোগ করা হয়েছে।
৪. Advanced Responsive Table with Stacked Columns
অনেক সময়, আপনি চাইবেন যে মোবাইল স্ক্রীনে টেবিলের প্রতিটি রোকে একটি "stacked" লেআউট আকারে প্রদর্শন করতে। অর্থাৎ, টেবিলের প্রতিটি কলাম মোবাইল ডিভাইসে একটি একক কলামে দেখতে হবে। এটি ব্যবহারকারীদের জন্য আরও পাঠযোগ্য এবং নেভিগেটযোগ্য হবে।
এটি করার জন্য, আপনি CSS মিডিয়া কুয়েরি ব্যবহার করতে পারেন, যেখানে আপনি টেবিলের রোকে কাস্টমাইজ করে আড়াআড়ি (horizontal) থেকে লম্বালম্বি (vertical) ডিসপ্লেতে পরিবর্তন করবেন।
৫. Stacked Columns Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Stacked Table</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Stacked table for small screens */
@media (max-width: 600px) {
.pure-table th, .pure-table td {
display: block;
width: 100%;
}
.pure-table th {
background-color: #f2f2f2;
font-weight: bold;
padding: 8px;
}
.pure-table td {
padding: 8px;
border-top: 1px solid #ccc;
}
}
</style>
</head>
<body>
<h1>Responsive Stacked Table</h1>
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
@media (max-width: 600px): ছোট স্ক্রীনের জন্য একটি মিডিয়া কুয়েরি ব্যবহার করা হয়েছে। যখন স্ক্রীনের প্রস্থ 600px এর কম হবে, তখন টেবিলের প্রতিটি সারি একে একে "stacked" অবস্থায় পরিবর্তিত হবে।display: block;: এই স্টাইলটি টেবিলেরthএবংtdউপাদানগুলোকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করে, যা একেকটি সারি ধরে সেগুলোর মধ্যে আলাদা আলাদা লাইন তৈরি করে।
Pure.CSS ব্যবহার করে Responsive Tables তৈরি করা খুবই সহজ এবং কার্যকরী। এর মধ্যে আপনাকে শুধু কিছু সহজ CSS স্টাইল এবং মিডিয়া কুয়েরি ব্যবহার করতে হয়।
- Overflow সিস্টেমের মাধ্যমে টেবিল স্ক্রলেবল করা যায়, যা ছোট স্ক্রীনে সহজে দেখানো সম্ভব হয়।
- Stacked table তৈরি করার মাধ্যমে মোবাইল ব্যবহারকারীদের জন্য একটি আরও সুবিধাজনক টেবিল লেআউট তৈরি করা যায়।
Pure.CSS এর গ্রিড সিস্টেম এবং অন্যান্য উপাদানগুলির সাহায্যে আপনি সহজেই রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করতে পারবেন যা বিভিন্ন ডিভাইসের জন্য উপযুক্ত হবে।
