রেসপন্সিভ টেবিল

ছোট স্ক্রিনে বড় ডেটা টেবিল প্রায়ই পড়া যায় না, কারণ কলামগুলি স্ক্রিনের বাইরে চলে যায় বা এতটাই ছোট হয়ে যায় যে পড়া যায় না। এই নির্দেশিকা থেকে জানতে পারবেন যে স্ক্রল করার সময় হেডার যাতে দেখা যায় তার জন্য কীভাবে স্টিকি পজিশনিং ব্যবহার করতে হয় এবং জায়গা সীমিত থাকলে কীভাবে টেবিলকে মোবাইল-ফ্রেন্ডলি "স্ট্যাক করা" লেআউটে পরিবর্তন করতে হয়।

সাজেস্ট করা পদ্ধতি

রেসপন্সিভ টেবিলের মূল কাজ হল ডেটা সেল ও তার হেডারের মধ্যে সম্পর্ক বজায় রাখা।

1. সিম্যান্টিক ফাউন্ডেশন: <thead>, <tbody> ও <th> এলিমেন্টের সাথে স্ট্যান্ডার্ড <table> এলিমেন্ট ব্যবহার করুন।
2. স্টিকি কনটেক্সট: কলাম হেডার ও সারি হেডার, দুটিতেই position: sticky প্রয়োগ করুন। এর ফলে, ব্যবহারকারী যেকোনও দিকে যতদূরই স্ক্রল করুন না কেন, ডেটা কীসের তা তিনি সবসময় বুঝতে পারবেন।
3. অ্যাডাপ্টিভ ট্রান্সফর্মেশন: @media কোয়েরির পরিবর্তে @container কোয়েরি ব্যবহার করুন। এটি সম্পূর্ণ ভিউপোর্টের পরিবর্তে টেবিলকে নিজস্ব প্রস্থের উপর ভিত্তি করে মানিয়ে নিতে দেয় (যেমন, সাইডবার বা সংকীর্ণ ড্যাশবোর্ড উইজেটে রাখা হলে)।
4. লেবেল ইনজেকশন: স্ট্যাক করা লেআউটে, <thead> লুকানো থাকে এবং ::before ছদ্ম-এলিমেন্ট ও CSS ভেরিয়েবল ব্যবহার করে প্রতিটি সেলে অ্যাক্সেসযোগ্য হেডার ইনজেক্ট করা হয়।

প্রয়োগ করার বিভিন্ন ধাপ

১. মার্কআপ ও লেআউট

স্ট্যান্ডার্ড সিম্যান্টিক হেডার ব্যবহার করে আপনার টেবিল সাজান। ওভারফ্লো ম্যানেজ করতে এবং কোয়েরির জন্য কন্টেনার প্রদান করতে .table-wrapper ব্যবহার করুন। কন্টেনারে tabindex="0" অ্যাট্রিবিউট যোগ করুন, যাতে শুধুমাত্র কীবোর্ড ব্যবহারকারী ব্যক্তিরা টেবিলটি ধারাবাহিকভাবে স্ক্রল করতে পারেন।

র‍্যাপারকে একটি role="region" অ্যাট্রিবিউট দিন যাতে এটি তার উদ্দেশ্য জানাতে পারে। aria-labelledby (টেবিলের ক্যাপশন/নাম দেয় এমন আগে থেকে থাকা এলিমেন্টের id অ্যাট্রিবিউটকে রেফারেন্স করে) বা aria-label অ্যাট্রিবিউট ব্যবহার করে এটিকে একটি অ্যাক্সেসযোগ্য নাম দিন।

<div tabindex="0" role="region" aria-labelledby="employee-table-caption" class="table-wrapper">
  <table>
    <caption id="employee-table-caption">Current employee directory</caption>
    <thead>
      <tr>
        <th>Employee</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- Row header remains sticky horizontally on desktop, 
             and becomes a sticky card header on mobile -->
        <th>Alex Rivera</th>
        <td>Engineer</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

২. স্টিকি হেডার কনফিগার করুন

স্ক্রল করার সুবিধা চালু করুন এবং হেডার স্টিকি করুন। স্ট্যাকিং অর্ডার ম্যানেজ করতে লজিক্যাল প্রপার্টি ও স্পষ্ট z-ইনডেক্স ভ্যালু ব্যবহার করুন।

.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(500px, 80vh);
  container-type: inline-size;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky column headers (desktop) */
thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 1; /* Above sticky row headers */
}

/* Sticky row headers (desktop) */
tbody th {
  position: sticky;
  inset-inline-start: 0;
  background: white; /* Required to cover background during scroll */
}

৩. রেসপন্সিভ স্ট্যাক করা লেআউট

জায়গা সীমিত হলে, আসল হেডার সারি লুকান এবং টেবিলটি কার্ডে রূপান্তর করুন। সিউডো-এলিমেন্ট ব্যবহার করে লেবেল ইনজেক্ট করুন। শুধুমাত্র টেক্সট নয় এমন কন্টেন্টের জন্য বিকল্প টেক্সট প্রদান করুন, অন্যথায় এর ফলে টেক্সট কন্টেন্ট এবং অ্যাক্সেসযোগ্য নাম উভয়ই স্ক্রিন রিডার দ্বারা ঘোষণা করা হতে পারে।

@container (width < 600px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }

  thead {
    /* MANDATORY: Hide column header from layout and screen readers. */
    display: none
  }

  tr {
    margin-block-end: 1.5rem;
    border: 1px solid #ccc;
  }

  /* Sticky row headers at the top of each block/card */
  tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: #eee;
  }

  /* Define column labels as CSS variables (often set via JS) */
  table {
    --label-1: "Employee";
    --label-2: "Role";
    --label-3: "Status";
  }

  /* Inject labels */
  td:nth-child(2)::before {
    /* MANDATORY: If using non-text content, provide the accessible name (after the /) which ensures screen readers hear the text alternative. */
    content: var(--label-2) ": ";
  }
  /* MANDATORY: Map the label for each column */
  td:nth-child(3)::before {
    content: var(--label-3) ": ";
  }
}