Pure.CSS এর Table Styling এবং Responsiveness

পিওর.সিএসএস (Pure.CSS) - Web Development

249

Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব পেজের টেবিলগুলির জন্য স্টাইলিং এবং রেসপন্সিভ ডিজাইন তৈরি করতে সাহায্য করে। Table Styling এবং Responsiveness টেবিলের মাধ্যমে তথ্য উপস্থাপনা করার জন্য অত্যন্ত গুরুত্বপূর্ণ। Pure.CSS টেবিলের জন্য কিছু প্রি-ডিফাইনড স্টাইল প্রদান করে, এবং আপনি সহজেই এগুলি কাস্টমাইজ করে নিতে পারেন।

এই গাইডে আমরা Pure.CSS ব্যবহার করে টেবিল স্টাইলিং এবং রেসপন্সিভ টেবিল ডিজাইন করার পদ্ধতি দেখব।

1. Basic Table Styling in Pure.CSS

Pure.CSS একটি বেসিক টেবিল স্টাইলিং প্রদান করে যা খুবই ক্লিন এবং পড়তে সহজ। আপনি pure-table ক্লাস ব্যবহার করে টেবিলের জন্য স্টাইল যুক্ত করতে পারেন।

উদাহরণ: Basic Table Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Table Styling</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>

  <h2>Pure.CSS Table Example</h2>

  <table class="pure-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>David Johnson</td>
        <td>41</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

pure-table: এই ক্লাসটি টেবিলের জন্য প্রাথমিক স্টাইল প্রয়োগ করে। এটি টেবিলের সীমানা এবং সেলগুলির মধ্যে মার্জিন এবং প্যাডিং নির্ধারণ করে।
thead: টেবিলের হেডিং অংশ, যেখানে কলামের নাম রয়েছে।
tbody: টেবিলের বডি অংশ, যেখানে ডাটা থাকে।

2. Advanced Table Styling in Pure.CSS

Pure.CSS আপনাকে আরও উন্নত টেবিল স্টাইলিংয়ের সুযোগও দেয়, যেমন টেবিলের সীমানা, হেডিংয়ের ব্যাকগ্রাউন্ড এবং হোভার ইফেক্টস।

উদাহরণ: Advanced Table Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Advanced Table</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .pure-table-bordered {
      border: 1px solid #ddd;
    }
    .pure-table-bordered th, .pure-table-bordered td {
      padding: 10px;
    }
    .pure-table-bordered th {
      background-color: #f4f4f4;
    }
    .pure-table-bordered tr:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

  <h2>Advanced Pure.CSS Table Example</h2>

  <table class="pure-table pure-table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>David Johnson</td>
        <td>41</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

pure-table-bordered: এটি টেবিলের সীমানা যোগ করে।
th: টেবিলের হেডিং সেলের জন্য ব্যাকগ্রাউন্ড কালার এবং প্যাডিং নির্ধারণ করা হয়েছে।
tr:hover: যখন আপনি টেবিলের কোনো সারিতে মাউস হোভার করবেন, তখন তার ব্যাকগ্রাউন্ড পরিবর্তন হবে (হোভার ইফেক্ট)।

3. Responsive Table in Pure.CSS

টেবিলগুলো বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শন করার জন্য responsive হতে হবে। Pure.CSS-এ আপনি একটি রেসপন্সিভ টেবিল তৈরি করতে custom media queries ব্যবহার করতে পারেন, যাতে টেবিল মোবাইল বা ছোট স্ক্রীনে উপযুক্তভাবে প্রদর্শিত হয়।

উদাহরণ: Responsive Table with Media Queries

<!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://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .pure-table {
      width: 100%;
      margin-bottom: 20px;
    }

    @media (max-width: 600px) {
      .pure-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }

      .pure-table th, .pure-table td {
        display: block;
        text-align: right;
      }

      .pure-table td {
        padding-left: 50%;
      }

      .pure-table th::after {
        content: ":";
        padding-left: 10px;
      }
    }
  </style>
</head>
<body>

  <h2>Responsive Pure.CSS Table Example</h2>

  <table class="pure-table pure-table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>Los Angeles</td>
      </tr>
      <tr>
        <td>David Johnson</td>
        <td>41</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

@media (max-width: 600px): মোবাইল ডিভাইসের জন্য মিডিয়া কোয়েরি ব্যবহার করা হয়েছে, যাতে টেবিলটি স্ক্রীনের প্রস্থ অনুযায়ী রেসপন্সিভ হয়।
display: block: ছোট স্ক্রীনে টেবিলের সেলগুলি ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হবে, যাতে তাদের পছন্দমত সাইজে দেখানো যায়।
white-space: nowrap: টেবিলের উপাদানগুলো এক লাইনে থাকবে এবং স্ক্রলিং হবে।
padding-left: 50%: মোবাইল স্ক্রীনে সেলগুলি পরস্পরের উপরে যাবে এবং প্রতিটি সেলকে আরও স্পষ্টভাবে উপস্থাপন করতে হবে।

4. Enhancing Table Responsiveness with Overflow

মোবাইল ডিভাইস এবং ছোট স্ক্রীনে horizontal scrolling এর জন্য আপনি টেবিলের ভিতরে overflow-x ব্যবহার করতে পারেন।

উদাহরণ: Table with Horizontal Scrolling for Small Screens

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with Horizontal Scrolling</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .table-wrapper {
      overflow-x: auto;
    }

    .pure-table {
      width: 100%;
    }
  </style>
</head>
<body>

  <h2>Responsive Table with Horizontal Scrolling</h2>

  <div class="table-wrapper">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
          <th>Country</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>28</td>
          <td>New York</td>
          <td>USA</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>34</td>
          <td>Los Angeles</td>
          <td>USA</td>
          <td>jane@example.com</td>
        </tr>
        <tr>
          <td>David Johnson</td>
          <td>41</td>
          <td>Chicago</td>
          <td>USA</td>
          <td>david@example.com</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

ব্যাখ্যা:

overflow-x: auto: যখন স্ক্রীন খুব ছোট হবে (যেমন মোবাইল), টেবিলের জন্য অনুভূমিক স্ক্রলিং সক্রিয় করা হবে যাতে ব্যবহারকারী টেবিলটি স্ক্রল করে দেখতে পারে।

Pure.CSS-এ Table Styling এবং Responsiveness তৈরি করার জন্য আপনি সহজেই pure-table এবং pure-table-bordered ক্লাস ব্যবহার করতে পারেন। এছাড়া, media queries এবং overflow-x ব্যবহার করে, আপনি টেবিলের উপাদানগুলোকে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে প্রদর্শন করতে পারেন। Pure.CSS-এর সাহায্যে আপনি একটি রেসপন্সিভ এবং স্টাইলিশ টেবিল ডিজাইন তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য সুবিধাজনক হবে।

Content added By

Najjar Hossain Raju

Tables এর জন্য Custom Styling

246

Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা আপনাকে সহজে স্টাইলিশ এবং রেসপন্সিভ টেবিল তৈরি করতে সহায়তা করে। যেহেতু টেবিলের জন্য ডিজাইন এবং স্টাইলিং একটি সাধারণ ওয়েব ডেভেলপমেন্ট টাস্ক, Pure.CSS আপনাকে এর জন্য বেশ কিছু কাস্টম স্টাইল প্রদান করে।

Custom Table Styling in Pure.CSS

Pure.CSS-এর মধ্যে টেবিলের জন্য pure-table ক্লাস রয়েছে, যা টেবিলের ডিফল্ট স্টাইলিং প্রদান করে। তবে আপনি চাইলে এটি কাস্টমাইজ করে আরও উন্নত ডিজাইন তৈরি করতে পারেন, যেমন বর্ডার, প্যাডিং, রং, টেক্সট সাইজ, বা হোভার ইফেক্ট। নিচে কিছু কাস্টম স্টাইলিং কৌশল দেওয়া হয়েছে যেগুলি Pure.CSS-এ টেবিল তৈরির সময় ব্যবহার করা যেতে পারে।

1. Basic Table Styling with Pure.CSS

প্রথমে, Pure.CSS এর pure-table ক্লাস ব্যবহার করে একটি বেসিক টেবিল তৈরি করা হয়, যা টেবিলের জন্য ডিফল্ট স্টাইল প্রদান করে।

উদাহরণ: Basic Table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Table Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>

  <table class="pure-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>(123) 456-7890</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>(987) 654-3210</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

pure-table: এটি টেবিলের জন্য ডিফল্ট স্টাইল প্রদান করে। এটি সেল, রো এবং হেডিংগুলোকে সুন্দরভাবে সাজিয়ে দেয়।

2. Adding Borders and Padding to Table Cells

যখন আপনি টেবিলের সেলগুলোর মধ্যে বর্ডার এবং প্যাডিং যোগ করতে চান, তখন আপনি border এবং padding প্রপার্টি ব্যবহার করতে পারেন। Pure.CSS এ, সেলগুলোর মধ্যে বর্ডার যোগ করার জন্য আপনি কাস্টম CSS কোড ব্যবহার করতে পারেন।

উদাহরণ: Custom Border and Padding for Table Cells

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with Borders and Padding</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    table.pure-table td, table.pure-table th {
      border: 1px solid #ddd;
      padding: 8px 12px;
    }

    table.pure-table thead {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <table class="pure-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>(123) 456-7890</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>(987) 654-3210</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

border: 1px solid #ddd;: সেলগুলিতে একটি হালকা গ্রে বর্ডার যোগ করা হয়েছে।
padding: 8px 12px;: সেলগুলির মধ্যে প্যাডিং বাড়ানো হয়েছে, যাতে সেলগুলির মধ্যে যথেষ্ট জায়গা থাকে।
background-color: #f2f2f2;: টেবিলের হেডারে হালকা ব্যাকগ্রাউন্ড কালার যোগ করা হয়েছে।

3. Hover Effect on Table Rows

আপনি চাইলে টেবিল রোতে হোভার ইফেক্টও যোগ করতে পারেন, যাতে ব্যবহারকারী যখন একটি রোতে মাউস নিয়ে যাবে, তখন সেটি আলাদা হয়ে দেখায়।

উদাহরণ: Table Row Hover Effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table with Hover Effect</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    table.pure-table tbody tr:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

  <table class="pure-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>(123) 456-7890</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>(987) 654-3210</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

table.pure-table tbody tr:hover { background-color: #f0f0f0; }: যখন ব্যবহারকারী একটি টেবিল রোতে মাউস নিয়ে যাবে, তখন রোটি হালকা গ্রে ব্যাকগ্রাউন্ড পাবে।

4. Striping Table Rows for Better Readability

টেবিলের রোকে স্ট্রাইপ করে দিলে (অর্থাৎ প্রতি দ্বিতীয় রো আলাদা ব্যাকগ্রাউন্ড রঙে প্রদর্শিত হলে) পঠনযোগ্যতা আরও ভালো হয়। Pure.CSS তে pure-table-striped ক্লাস ব্যবহার করে আপনি সহজেই স্ট্রাইপিং প্রভাব তৈরি করতে পারেন।

উদাহরণ: Striped Table Rows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Striped Table</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>

  <table class="pure-table pure-table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>johndoe@example.com</td>
        <td>(123) 456-7890</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>janesmith@example.com</td>
        <td>(987) 654-3210</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ব্যাখ্যা:

pure-table-striped: এই ক্লাসটি টেবিলের রো গুলিতে স্ট্রাইপ প্রভাব প্রয়োগ করে। এটি প্রতি দ্বিতীয় রোতে আলাদা ব্যাকগ্রাউন্ড কালার প্রদান করে।

5. Responsive Tables

Pure.CSS তে টেবিলগুলি রেসপন্সিভ করার জন্য আপনি pure-table-responsive ক্লাস ব্যবহার করতে পারেন। এই ক্লাসটি টেবিলের ভিতরে স্ক্রোলিং যোগ করবে যাতে ছোট স্ক্রীনগুলিতে টেবিল উপাদানগুলি সহজে দেখা যায়।

উদাহরণ: 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://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
</head>
<body>

  <div class="pure-table-responsive">
    <table class="pure-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Doe</td>
          <td>johndoe@example.com</td>
          <td>(123) 456-7890</td>
        </tr>
        <tr>
          <td>Jane Smith</td>
          <td>janesmith@example.com</td>
          <td>(987) 654-3210</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

ব্যাখ্যা:

pure-table-responsive: এই ক্লাসটি টেবিলের জন্য স্ক্রোলিং সক্ষম করে, যাতে ছোট স্ক্রীনে এটি সহজে স্ক্রোল করা যায়।

Pure.CSS ব্যবহার করে টেবিল স্টাইলিং অনেক সহজ এবং দ্রুত করা যায়। pure-table ক্লাসের মাধ্যমে আপনি একটি সুন্দর এবং ক্লিন টেবিল তৈরি করতে পারবেন, এবং pure-table-striped, pure-table-responsive, pure-table-bordered ক্লাসের মাধ্যমে আপনার টেবিলের স্টাইল আরও উন্নত করতে পারবেন। Media queries ব্যবহার করে টেবিলকে রেসপন্সিভ করা যায়, যাতে এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়। Pure.CSS আপনার টেবিল ডিজাইন করার প্রক্রিয়া অনেক সহজ করে দেয়, এবং এটি দ্রুত ওয়েব পেজ লোড করার জন্য একটি আদর্শ পছন্দ।

Content added By

Najjar Hossain Raju

Responsive Tables তৈরি করা

243

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 গ্রিড সিস্টেমের মাধ্যমে টেবিলের ডিজাইন এবং লেআউট সহজেই কাস্টমাইজ করা সম্ভব, যাতে ছোট স্ক্রীনেও এটি ফিট হয়।

Content added By

Najjar Hossain Raju

Table Rows এবং Columns এর জন্য Custom Classes

328

Pure.CSS ফ্রেমওয়ার্কের মাধ্যমে আপনি সহজেই টেবিলের rows এবং columns এর জন্য কাস্টম ক্লাস তৈরি করতে পারেন। Pure.CSS কিছু প্রাথমিক টেবিল স্টাইল প্রদান করে, তবে আপনি টেবিলের লেআউট এবং ডিজাইনকে আরও কাস্টমাইজ করতে পারেন। এই প্রক্রিয়ায়, আপনি টেবিলের রো এবং কলামগুলির জন্য কাস্টম ক্লাস যোগ করতে পারবেন যা টেবিলকে আরও পরিষ্কার এবং আকর্ষণীয় করে তুলবে।

এখানে, Pure.CSS ব্যবহার করে Table Rows এবং Columns এর জন্য কাস্টম ক্লাস তৈরি করার একটি উদাহরণ দেওয়া হলো।

1. Pure.CSS Table Styling with Custom Classes

Pure.CSS সরাসরি টেবিলের জন্য মৌলিক স্টাইল প্রদান করে, কিন্তু আপনি এর সেল, রো, এবং কলামের জন্য কাস্টম স্টাইল যোগ করতে পারেন।

Table Structure with 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 Table Styling with Custom Classes</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <style>
        table.custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 1em;
            text-align: left;
        }

        table.custom-table th,
        table.custom-table td {
            padding: 12px;
            border: 1px solid #ccc;
        }

        table.custom-table th {
            background-color: #3498db;
            color: white;
        }

        table.custom-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Custom Class for Table Rows */
        .highlight-row {
            background-color: #ffeb3b;
            color: #333;
        }

        /* Custom Class for Table Columns */
        .highlight-column {
            font-weight: bold;
            color: #e74c3c;
        }
    </style>
</head>
<body>

    <table class="pure-table custom-table">
        <thead>
            <tr>
                <th class="highlight-column">ID</th>
                <th>Name</th>
                <th class="highlight-column">Age</th>
                <th class="highlight-column">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr class="highlight-row">
                <td>1</td>
                <td>John Doe</td>
                <td>30</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>25</td>
                <td>UK</td>
            </tr>
            <tr class="highlight-row">
                <td>3</td>
                <td>Sam Brown</td>
                <td>28</td>
                <td>Canada</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

ব্যাখ্যা:

Pure.CSS Table Classes:
- pure-table: এটি Pure.CSS দ্বারা প্রাথমিক টেবিল স্টাইল প্রদান করে।
- custom-table: কাস্টম ক্লাস যা টেবিলের জন্য অতিরিক্ত স্টাইলিং যোগ করতে ব্যবহৃত হয়েছে।
- th এবং td styling: টেবিলের সেলগুলির জন্য প্যাডিং, সীমা এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
Custom Classes:
- highlight-row: এই ক্লাসটি টেবিলের নির্দিষ্ট রোকে হাইলাইট করার জন্য ব্যবহার করা হয়েছে। আমরা এখানে background-color: #ffeb3b দিয়ে রোটি হলুদ রঙে পরিবর্তন করেছি এবং color: #333 দিয়ে টেক্সটের রঙ সাদাটে করে দিয়েছি।
- highlight-column: এই ক্লাসটি টেবিলের নির্দিষ্ট কলামগুলির জন্য ব্যবহার করা হয়েছে। এটি কলামটির ফন্ট-ওয়েটকে bold এবং টেক্সট রঙ red করে দেয়।
nth-child(even): এই CSS সিলেক্টর ব্যবহার করে আমরা টেবিলের জোড়া রোকে আলাদা রঙ (light grey) দিয়ে সাজিয়েছি, যাতে সেগুলি আরও পরিষ্কারভাবে আলাদা করা যায়।

2. Further Customization and Layouts

আপনি যদি columns বা rows এর জন্য আরও কাস্টম স্টাইল করতে চান, আপনি নিম্নলিখিত CSS কৌশলগুলো ব্যবহার করতে পারেন:

Custom Table Styling with Row and Column Grouping:

<style>
    /* Custom styling for header row */
    table.custom-table th {
        background-color: #2c3e50;
        color: white;
    }

    /* Custom styling for even rows */
    table.custom-table tr:nth-child(even) {
        background-color: #ecf0f1;
    }

    /* Custom styling for first column */
    table.custom-table td:first-child {
        font-weight: bold;
        color: #2980b9;
    }

    /* Custom styling for last column */
    table.custom-table td:last-child {
        text-align: right;
        color: #27ae60;
    }

    /* Custom row hover effect */
    table.custom-table tr:hover {
        background-color: #f39c12;
        color: white;
    }
</style>

ব্যাখ্যা:

Header Row Styling: th ট্যাগগুলির জন্য আলাদা রঙ এবং স্টাইল দেওয়া হয়েছে যাতে হেডারগুলি পরিষ্কারভাবে আলাদা থাকে।
Even Rows Styling: nth-child(even) দিয়ে টেবিলের সব জোড়া রোকে আলাদা রঙ দেওয়া হয়েছে।
First Column Customization: td:first-child ব্যবহার করে টেবিলের প্রথম কলামের জন্য আলাদা স্টাইল তৈরি করা হয়েছে (যেমন: ফন্ট ওয়েট bold এবং রঙ blue দেওয়া হয়েছে)।
Last Column Customization: td:last-child ব্যবহার করে টেবিলের শেষ কলামের জন্য right alignment এবং green রঙ প্রদান করা হয়েছে।
Row Hover Effect: tr:hover ব্যবহার করে, যখন আপনি কোনও রোতে হোভার করবেন, তখন তার ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হবে এবং টেক্সট সাদা হয়ে যাবে।

Pure.CSS এর মাধ্যমে table rows এবং columns এর জন্য কাস্টম ক্লাস তৈরি করা অত্যন্ত সহজ। Custom classes ব্যবহার করে আপনি সহজেই টেবিলের ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারেন। এই কাস্টম ক্লাসগুলির মাধ্যমে আপনি:

টেবিলের রো এবং কলাম হাইলাইট করতে পারেন,
অ্যালটারনেট রো এর জন্য ব্যাকগ্রাউন্ড রঙ দিতে পারেন,
প্রথম এবং শেষ কলাম আলাদা স্টাইল করতে পারেন।

এই কৌশলগুলো আপনার টেবিল ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য উপযোগী করে তুলবে। Pure.CSS আপনাকে একটি সিম্পল, ইফেক্টিভ এবং রেসপন্সিভ টেবিল তৈরি করতে সহায়তা করে।

Content added By

Najjar Hossain Raju

Data-heavy Tables এর জন্য Responsive Design Techniques

236

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 এর গ্রিড সিস্টেম এবং মিডিয়া কুয়েরি আপনাকে এই ধরনের রেসপনসিভ লেআউট তৈরিতে সাহায্য করবে, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং ফ্লেক্সিবল করে তুলবে।

Content added By

Najjar Hossain Raju

Pure.CSS এর পরিচিতি Pure.CSS সেটআপ এবং ইনস্টলেশন Pure.CSS এর Responsive Grid System Pure.CSS এর টেক্সট স্টাইলিং এবং টাইপোগ্রাফি Pure.CSS এর Buttons এবং Button Groups

Pure.CSS এর Table Styling এবং Responsiveness

1. Basic Table Styling in Pure.CSS

উদাহরণ: Basic Table Styling

ব্যাখ্যা:

2. Advanced Table Styling in Pure.CSS

উদাহরণ: Advanced Table Styling

ব্যাখ্যা:

3. Responsive Table in Pure.CSS

উদাহরণ: Responsive Table with Media Queries

ব্যাখ্যা:

4. Enhancing Table Responsiveness with Overflow

উদাহরণ: Table with Horizontal Scrolling for Small Screens

ব্যাখ্যা:

Tables এর জন্য Custom Styling

Custom Table Styling in Pure.CSS

1. Basic Table Styling with Pure.CSS

উদাহরণ: Basic Table

ব্যাখ্যা:

2. Adding Borders and Padding to Table Cells

উদাহরণ: Custom Border and Padding for Table Cells

ব্যাখ্যা:

3. Hover Effect on Table Rows

উদাহরণ: Table Row Hover Effect

ব্যাখ্যা:

4. Striping Table Rows for Better Readability

উদাহরণ: Striped Table Rows

ব্যাখ্যা:

5. Responsive Tables

উদাহরণ: Responsive Table

ব্যাখ্যা:

Responsive Tables তৈরি করা

Responsive Table with Pure.CSS

1. Simple Responsive Table Example:

ব্যাখ্যা:

2. Another Responsive Table Example Using Pure.CSS:

ব্যাখ্যা:

Table Rows এবং Columns এর জন্য Custom Classes

1. Pure.CSS Table Styling with Custom Classes

Table Structure with Pure.CSS

ব্যাখ্যা:

2. Further Customization and Layouts

Custom Table Styling with Row and Column Grouping:

ব্যাখ্যা:

Data-heavy Tables এর জন্য Responsive Design Techniques

Responsive Design for Data-heavy Tables in Pure.CSS:

Techniques for Making Data-heavy Tables Responsive:

1. Horizontal Scrolling Technique

Example: Horizontal Scrolling for Data-heavy Table

ব্যাখ্যা:

2. Stacking Rows for Small Screens

Example: Stacking Rows for Mobile

ব্যাখ্যা:

3. Hiding Less Important Columns on Small Screens

Example: Hiding Columns on Small Screens

ব্যাখ্যা:

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!