Table Responsive

Table Responsive را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

جدول برای داده جدولی و List برای مجموعه آیتم‌هاست. در موبایل باید Overflow افقی کنترل شود و Empty State توضیح دهد چرا داده‌ای نیست و کاربر قدم بعدی را چگونه بردارد.

روش پیاده‌سازی

1. ساختار معنایی table یا list را حفظ کنید.
2. Container جدول را overflow-x-auto کنید.
3. Loading، Empty و Error State را جداگانه طراحی کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<div class="overflow-x-auto rounded-xl border">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-slate-600">
      <tr><th class="p-3 text-right">نام</th><th class="p-3 text-right">وضعیت</th></tr>
    </thead>
    <tbody class="divide-y">
      <tr><td class="p-3">دوره Tailwind</td><td class="p-3">فعال</td></tr>
    </tbody>
  </table>
</div>

خروجی مورد انتظار

جدول با Scroll افقی در نمایشگرهای کوچک.

نکات مهم و خطاهای رایج

• جدول را با divهای بدون نقش معنایی بازسازی نکنید.
• Empty State خالی و بدون اقدام بعدی تجربه مبهمی ایجاد می‌کند.

تمرین پیشنهادی

پنج ستون و یک عنوان طولانی اضافه و رفتار موبایل را بررسی کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS