Pure.CSS ব্যবহার করে Data-heavy Tables এর জন্য Responsive Design তৈরি করা একটি সাধারণ এবং কার্যকরী পদ্ধতি। ডেটা-হেভি টেবিলগুলো সাধারণত বড় পরিমাণ তথ্য ধারণ করে এবং স্ক্রীনে জায়গা কম থাকলে সেগুলির জন্য বিশেষ স্টাইলিং প্রয়োজন হয় যাতে টেবিলটি রেসপনসিভ (মোবাইল, ট্যাবলেট, ডেস্কটপ) স্ক্রীনে ভালভাবে প্রদর্শিত হয়। Pure.CSS দিয়ে আপনি সহজেই এই ধরনের টেবিল ডিজাইন করতে পারেন যা বিভিন্ন ডিভাইসে সুন্দরভাবে কাজ করবে।
Responsive Design for Data-heavy Tables in Pure.CSS:
একটি সাধারণ টেবিল যখন বড় পরিসরের ডেটা ধারণ করে, তখন তা মোবাইল স্ক্রীনে ভালভাবে প্রদর্শন করার জন্য কিছু স্টাইলিং এবং টেকনিক ব্যবহার করা উচিত। Pure.CSS এর গ্রিড সিস্টেম এবং মিডিয়া কুয়েরি দিয়ে আপনি এই টেবিলগুলোকে সহজেই রেসপনসিভ করতে পারবেন।
Techniques for Making Data-heavy Tables Responsive:
- Horizontal Scrolling: একে ব্যবহার করে আপনি বড় টেবিলের জন্য একটি স্ক্রলিং ফিচার যোগ করতে পারেন, যা ছোট স্ক্রীনে টেবিলটিকে স্ক্রল করতে দেয়।
- Stacking Rows for Small Screens: মোবাইল স্ক্রীনে আপনি টেবিলের প্রতিটি রো (row) স্ট্যাক করে একটি কার্ডের মতো দেখতে পারেন, যেখানে প্রতিটি কলাম অন্য লাইনে চলে যাবে।
- Hide Less Important Columns: মোবাইল স্ক্রীনে কম গুরুত্বপূর্ণ কলামগুলো আড়াল করা যেতে পারে, যাতে টেবিলটি আরও কমপ্যাক্ট হয়ে ওঠে।
1. Horizontal Scrolling Technique
এই টেকনিকটি ব্যবহার করে আপনি বড় টেবিলগুলোকে স্ক্রলযোগ্য করে তুলতে পারেন। এতে টেবিলটি ছোট স্ক্রীনে স্ক্রল করতে পারবে, কিন্তু টেবিলের সমস্ত কন্টেন্ট একেবারে দেখানো হবে।
Example: Horizontal Scrolling for Data-heavy Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Data-heavy Table</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Make the table scrollable on small screens */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="table-container">
<table class="pure-table">
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
<th>Quantity</th>
<th>Supplier</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>Electronics</td>
<td>$500</td>
<td>10</td>
<td>Supplier A</td>
<td>2022-01-01</td>
</tr>
<tr>
<td>Product 2</td>
<td>Furniture</td>
<td>$300</td>
<td>15</td>
<td>Supplier B</td>
<td>2022-02-01</td>
</tr>
<tr>
<td>Product 3</td>
<td>Clothing</td>
<td>$50</td>
<td>100</td>
<td>Supplier C</td>
<td>2022-03-01</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ব্যাখ্যা:
.table-container: এই ক্লাসটি টেবিলের চারপাশে একটি স্ক্রলিং কন্টেইনার যোগ করে। এটি ছোট স্ক্রীনে টেবিলের ভিতরে থাকা কন্টেন্ট স্ক্রল করতে সাহায্য করে।overflow-x: auto: এটি অনুভূমিক স্ক্রলিং সক্ষম করে এবং শুধুমাত্র যদি টেবিলটি বেশি প্রশস্ত হয়, তখনই স্ক্রল বারটি প্রদর্শিত হবে।-webkit-overflow-scrolling: touch: এটি iOS ডিভাইসগুলিতে স্ক্রলিংকে আরও মসৃণ করে তোলে।
2. Stacking Rows for Small Screens
এই টেকনিকটি ব্যবহার করে আপনি মোবাইল স্ক্রীনে টেবিলের রো গুলোকে কার্ডের মতো সাজাতে পারেন। এতে একে একে রো গুলো ভিউপোর্টের মধ্যে প্রদর্শিত হবে, যাতে ছোট স্ক্রীনে অনেক বড় টেবিল সহজে দেখা যায়।
Example: Stacking Rows for Mobile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacking Rows for Small Screens</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Stack rows on small screens */
@media screen and (max-width: 600px) {
table {
width: 100%;
border-collapse: collapse;
}
tr {
display: block;
margin-bottom: 20px;
}
td {
display: block;
padding: 8px;
text-align: left;
}
td::before {
content: attr(data-label);
font-weight: bold;
display: block;
}
}
</style>
</head>
<body>
<table class="pure-table">
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
<th>Quantity</th>
<th>Supplier</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Product">Product 1</td>
<td data-label="Category">Electronics</td>
<td data-label="Price">$500</td>
<td data-label="Quantity">10</td>
<td data-label="Supplier">Supplier A</td>
<td data-label="Date Added">2022-01-01</td>
</tr>
<tr>
<td data-label="Product">Product 2</td>
<td data-label="Category">Furniture</td>
<td data-label="Price">$300</td>
<td data-label="Quantity">15</td>
<td data-label="Supplier">Supplier B</td>
<td data-label="Date Added">2022-02-01</td>
</tr>
<tr>
<td data-label="Product">Product 3</td>
<td data-label="Category">Clothing</td>
<td data-label="Price">$50</td>
<td data-label="Quantity">100</td>
<td data-label="Supplier">Supplier C</td>
<td data-label="Date Added">2022-03-01</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
@media screen and (max-width: 600px): ছোট স্ক্রীনে (মোবাইল ডিভাইস) টেবিলের প্রতিটি রোকে ব্লক হিসেবে প্রদর্শন করা হয়েছে।td::before: এখানে, আমরা প্রতিটি টেবিল সেলের জন্য একটি লেবেল যোগ করেছি, যেমনdata-labelঅ্যাট্রিবিউট, যাতে এটি মোবাইল স্ক্রীনে সহজে পড়া যায়।display: block: রো এবং সেলকে ব্লক ডিসপ্লে করা হয়েছে যাতে তারা স্ট্যাক হয়ে যায়, যার ফলে প্রতিটি রো একে একে প্রদর্শিত হয়।
3. Hiding Less Important Columns on Small Screens
মোবাইল স্ক্রীনে কিছু কম গুরুত্বপূর্ণ কলামগুলো হাইড করা যেতে পারে। এটি টেবিলটিকে আরও কমপ্যাক্ট এবং ইউজার-ফ্রেন্ডলি করে তোলে।
Example: Hiding Columns on Small Screens
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Columns on Small Screens</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Hide less important columns on small screens */
@media screen and (max-width: 600px) {
th:nth-child(5), td:nth-child(5) {
display: none;
}
}
</style>
</head>
<body>
<table class="pure-table">
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
<th>Quantity</th>
<th>Supplier</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>Electronics</td>
<td>$500</td>
<td>10</td>
<td>Supplier A</td>
<td>2022-01-01</td>
</tr>
<tr>
<td>Product 2</td>
<td>Furniture</td>
<td>$300</td>
<td>15</td>
<td>Supplier B</td>
<td>2022-02-01</td>
</tr>
<tr>
<td>Product 3</td>
<td>Clothing</td>
<td>$50</td>
<td>100</td>
<td>Supplier C</td>
<td>2022-03-01</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
nth-childব্যবহার করে মোবাইল স্ক্রীনে কম গুরুত্বপূর্ণ কলাম (যেমনSupplier) সরিয়ে দেয়া হয়েছে।display: noneব্যবহার করে নির্দিষ্ট কলামগুলো সরানো হয়েছে, যাতে মোবাইল স্ক্রীনে শুধুমাত্র প্রয়োজনীয় তথ্য প্রদর্শিত হয়।
Pure.CSS ব্যবহার করে Data-heavy Tables এর জন্য Responsive Design Techniques সহজে বাস্তবায়ন করা যায়। Horizontal Scrolling, Stacking Rows, এবং Hiding Columns এর মতো টেকনিকগুলি আপনাকে ডেটা ভরপুর টেবিলগুলো মোবাইল, ট্যাবলেট এবং ডেস্কটপে সুন্দরভাবে প্রদর্শন করতে সাহায্য করবে। Pure.CSS এর গ্রিড সিস্টেম এবং মিডিয়া কুয়েরি আপনাকে এই ধরনের রেসপনসিভ লেআউট তৈরিতে সাহায্য করবে, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং ফ্লেক্সিবল করে তুলবে।
Read more
