طراحی جدول ریسپانسیو در محیط المنتور

در دنیای طراحی وب ابزارهای قدرتمندی مثل المنتور (Elementor) به طراحان کمک می‌کنند تا با سرعت و دقت بالا وبسایت‌های حرفه‌ای بسازند. یکی از نیازهای متداول در طراحی وبسایت استفاده از جداول برای نمایش اطلاعات به صورت سازمان‌دهی شده است. اما آیا می‌دانستید که می‌توانید جدول در محیط المنتور بدون افزونه طراحی کنید؟ در این مقاله به شما خواهیم آموخت که چگونه با استفاده از ابزارهای داخلی المنتور، جداول زیبا و کاربردی بسازید.استفاده از افزونه‌ها برای طراحی جدول می‌تواند منجر به افزایش حجم وبسایت و کاهش سرعت بارگذاری شود. علاوه بر این هر افزونه‌ای که به وبسایت اضافه می‌کنید، ممکن است نیاز به به‌روزرسانی‌های مداوم داشته باشد و حتی در برخی موارد مشکلات سازگاری با سایر افزونه‌ها را ایجاد کند. بنابراین یادگیری نحوه طراحی جدول بدون افزونه در المنتور نه تنها بهینه‌تر است بلکه کنترل بیشتری به شما می‌دهد.

مرحله اول

ابتدا ویجت کد کوتاه را از قسمت المان های المنتور انتخاب کنید

مرحله دوم

کد بالا را در قسمت ک کوتاه درج کنید

توضیحات کد:

1. عنوان آبی رنگ : از caption برای عنوان جدول استفاده شده و رنگ آن با استفاده از CSS تنظیم شده است.
2. اندازه محتوای ثابت : اندازه فونت و پدینگ داخلی سلول‌ها (padding) به صورت ثابت تنظیم شده است.
3. ریسپانسیو بودن : از overflow-x: auto برای نمایش افقی جدول در صفحات کوچک‌تر و از @media برای تنظیم نمایش در موبایل استفاده شده است.
4. نمایش در موبایل : در دستگاه‌های کوچک‌تر، هر ردیف جدول به صورت جداگانه نمایش داده می‌شود و از data-label برای نمایش عنوان هر ستون استفاده شده است.

این کد یک جدول ریسپانسیو ایجاد می‌کند که در دستگاه‌های مختلف به درستی نمایش داده می‌شود و می‌توانید آن را در المنتور و به صورت ویجت کد کوتاه استفاده کنید.

دمو جدول ریسپانسیو