تصویر محمدعلی اکبری
اگر طراح وب هستید حتما برای ایجاد یک طرح پاسخگو شامل جداول (HTML Table) مشکل داشته‌اید، در این مقاله ایده‌ای برای برخورد با این چالش طراحی پاسخگو را بررسی می‌کنیم.

در تصاویر زیر جداول غیر پاسخگو را مشاهده می‌کنید. نتیجه zoom in مشاهده نصف جدول و نتیجه zoom out کوچک شدن نوشته‌ها است.


طراحی جدید باید چند مشکل جداول غیر پاسخگو را حل کند
1- جداول ممکن است تعداد ستون‌های متفاوتی داشته باشند، لذا به دنبال راه حل‌های عمومی هستیم.
2- اطلاعات یک ردیف از جدول به هم وابسته هستند، لذا می‌خواهیم وابستگی این داده‌ها را حفظ کنیم.
3- ایجاد امکان مرور جداول داده‌ها تنها به وسیله اسکرول عمودی (Vertical Scroll) باعث تمرکز کاربر بر روی محتوای صفحه می‌شود. چپ و راست رفتن در صفحه کاربر را خسته می‌کند.
4- می‌خواهیم کاربر بدون zoom out یا zoom in در صفحه، اطلاعات مورد نیاز را مشاهده کند.

جدول پاسخگو در صفحه نمایش‌های کوچکتر از 700px تنها به وسیله CSS به صورت زیر نمایش داده خواهد شد.

برچسب ها: 

افزودن نظر جدید