كيفية عمل جدول سريع الاستجابة في العنصر (3 طرق)

الوجبات السريعة الرئيسية

• يستخدم الجدول المستجيب لـ Elementor واحدًا من ثلاثة أنماط على الهواتف: صفوف مكدسة في بطاقات، أو تمرير جانبي داخل المربع الخاص بالجدول، أو عدد أقل من الأعمدة.
• يحتاج الجدول المكون من خمسة أعمدة إلى عرض يبلغ حوالي 640 بكسل ليظل قابلاً للقراءة، وتظهر معظم الهواتف ما بين 360 بكسل و430 بكسل، لذلك يفيض الجدول العريض ما لم تختر نمطًا.
• تقوم أداة Master Addons Dynamic Table بتجميع كل صف في بطاقة على الأجهزة التي يصل عرضها إلى 768 بكسل عند عرض Responsive Table؟ قيد التشغيل، وهو الافتراضي.
• يأخذ التمرير الأفقي قاعدتين من قواعد CSS: تعيين overflow-x تلقائيًا على الغلاف وعرض الحد الأدنى على الطاولة بداخله.
• يحتوي TablePress على مربع اختيار للتمرير الأفقي في إعدادات كل جدول، ويتم إيقاف تشغيله افتراضيًا.

الجدول المستجيب للعنصر هو الجدول الذي يظل قابلاً للقراءة على الهاتف، ولا تفعل الجداول ذلك بنفسها. تحتاج الأعمدة إلى عرض أكبر من عرض الهاتف، لذلك عادةً ما تخرج الطاولة من الجانب الأيمن من الشاشة.

هناك ثلاث طرق للتعامل معها. لقد بنينا الثلاثة جميعًا على Elementor 4.3 وفحصناهم على شاشة هاتف بعرض 390 بكسل.

لماذا تنكسر الجداول على الهاتف المحمول

لا يمكن للجدول أن يغلف أعمدته بالطريقة التي يمكن بها لصف من حاويات Elementor. يجب أن يجلس كل عمود بجانب الأعمدة الأخرى، ويحتاج كل عمود إلى مساحة لأطول كلمة له. طاولة الشحن المكونة من خمسة أعمدة لدينا مريحة بحوالي 640 بكسل. على هاتف 390 بكسل، يضغط المتصفح على الأعمدة حتى تتراكم الكلمات بعمق ثلاثة أسطر، ثم يسقط العمود الأخير من الحافة.

عناصر التحكم المستجيبة الخاصة بـ Elementor لا تساعد كثيرًا هنا. يمكنك إخفاء عنصر واجهة مستخدم كامل لكل جهاز أو تغيير عرضه، لكن لا يمكنك الوصول إلى داخل الجدول وإعادة ترتيب خلاياه.

أنماط الجدول الثلاثة المستجيبة

كل نمط له تكلفة.

النمط 1: قم بتكديس الصفوف في البطاقات

يؤدي التراص إلى تحويل كل صف إلى بطاقة صغيرة. يختفي صف الرأس وتظهر كل خلية اسم عمودها كتسمية. لا يوجد شيء مخفي ولا أحد يتحرك بشكل جانبي، لذا فهو الإعداد الافتراضي الأكثر أمانًا.

ال الجدول الديناميكي تقوم القطعة بذلك باستخدام مفتاح واحد.

1. حدد عنصر واجهة المستخدم للجدول الديناميكي في Elementor.
2. في علامة التبويب المحتوى، افتح إعدادات.
3. يترك الجدول المستجيب؟ اضبط على نعم. يتم تشغيله بشكل افتراضي.
4. افتح الصفحة على الهاتف. تكدس الصفوف على الأجهزة التي يصل عرضها إلى 768 بكسل.

تتحقق قاعدة التراص من عرض الجهاز، لذا فإن تقليص نافذة متصفح سطح المكتب لن يؤدي إلى تشغيله. اختبار على هاتف حقيقي أو باستخدام محاكاة الجهاز. إذا قمت بتعيين حشوة خلية كبيرة في علامة التبويب "النمط"، فتأكد من أن التسميات والقيم لا تكون قريبة جدًا من بعضها البعض على الهاتف.

هل تريد جدولًا يتم تكديسه بدون CSS؟ ال القطعة الجدول الديناميكي تم تشغيل مفتاح الجدول المستجيب منذ البداية.

النمط 2: التمرير الأفقي

يحافظ التمرير الأفقي على الجدول كما هو ويسمح للزائر بتمريره جانبًا داخل المربع الخاص به. الصفحة نفسها لا يتم تمريرها بشكل جانبي. استخدمه عندما يحتاج الأشخاص إلى قراءة عمود، مثل مقارنة الأسعار.

بالنسبة لجدول HTML في أداة HTML الخاصة بـ Elementor، قم بلف الجدول في div وأضف قاعدتين:

<div class="table-scroll">
  <table class="wide-table">
    ...
  </table>
</div>

<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>

ال min-width يمنع المتصفح من سحق الأعمدة، و overflow-x: auto يضيف التمرير فقط عندما تكون الشاشة أضيق من ذلك. قم بتغيير 640 بكسل إلى أي عرض يحتاجه الجدول الخاص بك للبقاء على سطر واحد لكل خلية.

نقطة الضعف هي أنه لا يوجد شيء يخبر الزائر بوجود المزيد على اليمين. العمود المقطوع إلى النصف، كما في لقطة الشاشة، هو أفضل تلميح يمكنك تقديمه، لذا لا تقم بتعيين الحد الأدنى للعرض على قيمة تنتهي بالضبط عند حافة العمود.

النمط 3: إخفاء الأعمدة

في بعض الأحيان يكون من الجيد وجود عمود على سطح المكتب وغير ضروري على الهاتف. قم بإخفائه أسفل نقطة التوقف وقد يتناسب الجدول دون أي تغيير آخر.

أضف فئة لكل th و td في الأعمدة يمكنك أن تخسر، ثم تخفي تلك الفئة على شاشات صغيرة

<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>

<style>
@media (max-width: 767px) {
  .hide-cols .hide-mobile { display: none; }
}
</style>

هنا hide-cols هي فئة على الجدول نفسه. 767px هي نقطة التوقف المتنقلة الافتراضية لـ Elementor، لذا تعود الأعمدة إلى الأجهزة اللوحية.

قم فقط بإخفاء ما يمكن لزائر الهاتف الاستغناء عنه. إذا قرر العمود المخفي ما إذا كان شخص ما سيشتري أو يستخدم التراص أو التمرير.

جدول مستجيب اضغط على الجداول في Elementor

يتصرف جدول TablePress الموجود في Elementor مثل أي جدول آخر: حيث يتجاوز حجم الجداول العريضة. الإصلاح موجود في إعدادات TablePress.

1. اذهب الى TablePress وتحرير الجدول.
2. انتقل إلى ميزات الجدول لزوار الموقع.
3. علامة التمرير الأفقي. يتم إيقاف تشغيله افتراضيًا.
4. انقر حفظ التغييرات.

في اختبارنا، أدى هذا إلى إصلاح التجاوز: تم تمرير الجدول داخل مربعه وبقيت الصفحة ثابتة. يحتوي TablePress أيضًا على أوضاع التراص والطي للهواتف، وهذه جزء من ميزة الجداول المستجيبة المدفوعة.

قائمة مرجعية سريعة للجوال

• افتح الصفحة على هاتف حقيقي. تفتقد المحاكيات التمرير باللمس وبعض قواعد عرض الجهاز.
• قم بتمرير الصفحة جانبًا. إذا تحركت الصفحة بأكملها، فإن الجدول يفيض.
• إبقاء نص الرأس قصيرا. “Free over” يلتف بشكل أفضل من “Free التسليم للطلبات over”.
• ضع العمود الأكثر أهمية أولاً. هو الذي يظل مرئيًا عند تمرير الجدول.
• تهدف إلى نص نصي 16 بكسل في الخلايا. تقليص الخط ليناسب الجدول يجعله غير قابل للقراءة.

الأسئلة المتداولة

الأفكار النهائية

لإنشاء جدول مستجيب لـ Elementor، حدد ما يحتاجه زائر الهاتف منه. قم بتكديس الصفوف عند قراءة كل صف بمفرده، ثم قم بالتمرير عند مقارنة الأعمدة، وقم بإخفاء الأعمدة فقط عندما تكون البيانات اختيارية.

إذا كنت تفضل عدم كتابة CSS، الجدول الديناميكي يتعامل مع نمط التراص من مفتاح في اللوحة.

القراءة ذات الصلة

• كيفية إنشاء جدول في العنصر (4 طرق)
• مقارنة أفضل المكونات الإضافية وأدوات جدول Elementor
• ملحق CSS مخصص لـ Elementor