جعل الجدول مستجيبًا باستخدام CSS

طريقة عملية لجعل عرض الجداول جميلاً على الهاتف المحمول

قبل أيام قليلة تلقيت تحذيرًا منجوجل Search Console. اكتشفت مشكلة في قابلية استخدام الأجهزة المحمولة على صفحة لدي طاولة كبيرة فيها.

هذا هو الجدول الذي أعطاني المشكلة:

على الهاتف المحمول ، تم عرضه بشكل سيء جدًا

ليست تجربة مستخدم لطيفة ، وخطأ في Google Search Console. إذا كان هناك شيء لا أريده هو خطأ / تحذير في ذلك المكان. ليس عندما يكون شيئًا يمكنني إصلاحه.

يتيح لي Hugo ، مولد الموقع الثابت الذي أستخدمه ، حقن CSS خاص بصفحة واحدة ، ببساطة عن طريق إضافة ملف<style>علامة في ملف تخفيض السعر. مفيد.

لذلك بدأت البحث عن طريقة جيدة لجعل طاولتي سريعة الاستجابة لقد صادفت هذا المقال الرائع حول CSS Tricksجداول البيانات المستجيبة. إنه من عام 2011 ، ولا يزال يعمل بشكل جيد!

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

هذا هو الكود الذي يحقق التصميم أعلاه:

@media
only screen and (max-width: 1500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Option"; }
  td:nth-of-type(2):before { content: "Description"; }
  td:nth-of-type(3):before { content: "Type"; }
  td:nth-of-type(4):before { content: "Default";}
}

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

الشيء الآخر هو المساحة التي ستشغلها "العناوين" الجديدة لكل صف. أضفت أ150pxالهامش ، وتحتاج إلى الرجوع إليه مرتين: مرة كملفmargin-left: 150pxفي الtd، وباعتبارها أmargin-left: -150pxفي الtd: before.

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

آمل أن يساعد هذا.

تحميل مجانيكتيب CSS


المزيد من دروس css: