جدول واکنش گرا در CSS (CSS Responsive Tables)
در این بخش «جدول واکنش گرا در CSS» را می سازیم. وقتی عرض صفحه برای نمایش همه ستون ها کافی نیست، جدول به صورت افقی قابل اسکرول می شود و بنابراین محتوا بدون شکست چیدمان در دسترس می ماند.
جدول واکنش گرا در CSS چیست؟
جدول واکنش گرا جدولی است که در نمایشگرهای باریک، به جای فشرده سازی ناخوانا، یک نوار پیمایش افقی نشان می دهد. این الگو ساده است، اما کارایی بالایی دارد و ساختار ردیف ها را تغییر نمی دهد.
پیاده سازی جدول واکنش گرا با overflow-x
طبق منبع، کافی است عنصر table
را درون یک ظرف div
قرار دهید و برای ظرف، ویژگی overflow-x
را برابر auto
تنظیم کنید تا در صورت کمبود فضا اسکرول افقی فعال شود.
چگونه انجام دهیم
- یک
div
پیرامون جدول بگذارید. overflow-x: auto;
را روی همانdiv
اعمال کنید.- در صورت نیاز، برای لمس راحت تر در موبایل، کمی
padding
افقی به ظرف بدهید.
div.tablecontainer{ overflow-x:auto; }
نکته: در برخی سیستم ها مانند macOS، نوارهای اسکرول فقط هنگام پیمایش نمایش داده می شوند؛ با این حال اسکرول افقی فعال است.
مسیرهای تکمیلی درباره جدول واکنش گرا
پس از ساخت جدول واکنش گرا در CSS، برای بهبود تجربه کاربری به این مطالب نیز سر بزنید: استایل دهی جدول در CSS و تراز جدول در CSS. برای مرور ویژگی ها، نمونه های بیشتر منبع را هم ببینید.