Pure.CSS দিয়ে Responsive Tables তৈরি করা একটি সহজ এবং কার্যকরী প্রক্রিয়া, যা ওয়েবসাইটের টেবিলগুলিকে বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শিত করতে সহায়ক। মোবাইল বা ছোট স্ক্রীন ডিভাইসে টেবিলের কন্টেন্ট দেখতে সমস্যা হতে পারে, কারণ সাধারণত টেবিলের কন্টেন্ট বড় এবং স্ক্রলিং করতে অসুবিধা হয়। তবে, Pure.CSS এর সাহায্যে আপনি সহজেই responsive tables তৈরি করতে পারেন।
Responsive Table with Pure.CSS
Pure.CSS গ্রিড সিস্টেম এবং অন্যান্য স্টাইলিং টুলস ব্যবহার করে আপনি রেসপন্সিভ টেবিল তৈরি করতে পারেন যা ছোট স্ক্রীনেও ভালোভাবে ফিট করবে।
1. Simple 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 with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Simple table styling */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
/* Make the table responsive on small screens */
@media (max-width: 600px) {
table, th, td {
display: block;
width: 100%;
}
th {
text-align: center;
background-color: #f4f4f4;
}
td {
text-align: right;
position: relative;
padding-left: 50%;
}
td:before {
content: attr(data-label);
position: absolute;
left: 10px;
font-weight: bold;
}
}
</style>
</head>
<body>
<h2>Responsive Table Example</h2>
<table class="pure-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Row 1, Cell 1</td>
<td data-label="Header 2">Row 1, Cell 2</td>
<td data-label="Header 3">Row 1, Cell 3</td>
<td data-label="Header 4">Row 1, Cell 4</td>
</tr>
<tr>
<td data-label="Header 1">Row 2, Cell 1</td>
<td data-label="Header 2">Row 2, Cell 2</td>
<td data-label="Header 3">Row 2, Cell 3</td>
<td data-label="Header 4">Row 2, Cell 4</td>
</tr>
<tr>
<td data-label="Header 1">Row 3, Cell 1</td>
<td data-label="Header 2">Row 3, Cell 2</td>
<td data-label="Header 3">Row 3, Cell 3</td>
<td data-label="Header 4">Row 3, Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
- Basic Table Structure: এখানে একটি সাধারণ টেবিল তৈরি করা হয়েছে, যেখানে header এবং table body রয়েছে।
- CSS Media Query:
@media (max-width: 600px)মিডিয়া কুয়েরি ব্যবহার করা হয়েছে, যাতে স্ক্রীন সাইজ 600px এর নিচে হলে টেবিলের ডিজাইন পরিবর্তন হয়।- Table Block Layout: ছোট স্ক্রীনে, টেবিলের rows, headers, এবং cells ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হবে।
data-label: টেবিলের প্রতিটি সেলটিতেdata-labelঅ্যাট্রিবিউট ব্যবহার করা হয়েছে যা মোবাইল স্ক্রীনে কলামের নাম প্রদর্শন করবে।
এই স্টাইলিংয়ের মাধ্যমে, যখন আপনি মোবাইল বা ছোট স্ক্রীনে এই টেবিলটি দেখবেন, তখন টেবিলের প্রতিটি সেল block হয়ে যাবে এবং কলামের নাম data-label এর মাধ্যমে প্রদর্শিত হবে। এটি মোবাইল ডিভাইসে সঠিকভাবে টেবিলের তথ্য প্রদর্শন নিশ্চিত করবে।
2. Another Responsive Table Example Using 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://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.pure-table {
width: 100%;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.pure-table th, .pure-table td {
padding: 12px;
text-align: left;
}
/* For small screen devices */
@media (max-width: 600px) {
.pure-table thead {
display: none;
}
.pure-table, .pure-table tbody, .pure-table tr, .pure-table td {
display: block;
width: 100%;
}
.pure-table td {
position: relative;
padding-left: 50%;
}
.pure-table td:before {
content: attr(data-label);
position: absolute;
left: 10px;
font-weight: bold;
}
}
</style>
</head>
<body>
<h2>Responsive Table with Pure.CSS</h2>
<table class="pure-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header 1">Row 1, Cell 1</td>
<td data-label="Header 2">Row 1, Cell 2</td>
<td data-label="Header 3">Row 1, Cell 3</td>
</tr>
<tr>
<td data-label="Header 1">Row 2, Cell 1</td>
<td data-label="Header 2">Row 2, Cell 2</td>
<td data-label="Header 3">Row 2, Cell 3</td>
</tr>
<tr>
<td data-label="Header 1">Row 3, Cell 1</td>
<td data-label="Header 2">Row 3, Cell 2</td>
<td data-label="Header 3">Row 3, Cell 3</td>
</tr>
</tbody>
</table>
</body>
</html>
ব্যাখ্যা:
- Hide Header on Small Screens: ছোট স্ক্রীনে টেবিলের হেডার (
thead) সরিয়ে ফেলা হয়েছে, যাতে মোবাইল স্ক্রীনে সঠিকভাবে কন্টেন্ট প্রদর্শিত হয়। data-label: কলামের নাম প্রতিটি সেলের আগেdata-labelঅ্যাট্রিবিউট হিসেবে যোগ করা হয়েছে, যা মোবাইল স্ক্রীনে সেলগুলির আগে কলামের নাম দেখাবে।
এই উদাহরণটিও একটি responsive table তৈরি করবে যেখানে হেডারটি ছোট স্ক্রীনে লুকিয়ে যায় এবং প্রতিটি সেলের পাশে তার উপযুক্ত ট্যাগ প্রদর্শিত হয়।
Pure.CSS দিয়ে আপনি খুব সহজেই responsive tables তৈরি করতে পারেন। Media Queries এবং data-label অ্যাট্রিবিউট ব্যবহার করে আপনি টেবিলের কন্টেন্ট মোবাইল ডিভাইসে সুন্দরভাবে প্রদর্শন করতে পারবেন। Pure.CSS গ্রিড সিস্টেমের মাধ্যমে টেবিলের ডিজাইন এবং লেআউট সহজেই কাস্টমাইজ করা সম্ভব, যাতে ছোট স্ক্রীনেও এটি ফিট হয়।
Read more
