كيفية تصميم جداول متجاوبة باستخدام CSS للمواقع الإلكترونية

📱 تصميم جداول متجاوبة في CSS: دليل المبتدئين الشامل

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

🤔 لماذا نحتاج جداول متجاوبة؟

عندما تعرض جدولاً عادياً على شاشة هاتف محمول، قد تلاحظ أحد هذه المشاكل:

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

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

🛠️ الطريقة الأولى: استخدام خاصية overflow-x

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

.responsive-table-container {
    width: 100%;
    overflow-x: auto; /* يسمح بالتمرير الأفقي عند الحاجة */
    -webkit-overflow-scrolling: touch; /* يجعل التمرير سلساً على الأجهزة التي تعمل باللمس */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

<div class="responsive-table-container">
    <table>
        <thead>
            <tr>
                <th>الاسم</th>
                <th>البريد الإلكتروني</th>
                <th>الهاتف</th>
                <th>المدينة</th>
                <th>البلد</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>أحمد محمد</td>
                <td>ahmed@example.com</td>
                <td>+966500000000</td>
                <td>الرياض</td>
                <td>السعودية</td>
            </tr>
        </tbody>
    </table>
</div>

في هذا المثال، الحاوية .responsive-table-container تضمن أن الجدول سيكون قابل للتمرير أفقيًا فقط عندما يحتاج إلى مساحة إضافية.

📱 الطريقة الثانية: إعادة تنظيم الجدول باستخدام Media Queries

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

/* التنسيق الأساسي للجدول */
.responsive-card-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-card-table th,
.responsive-card-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

/* تحويل الجدول إلى بطاقات على الشاشات الصغيرة */
@media screen and (max-width: 600px) {
    .responsive-card-table thead {
        display: none; /* إخفاء رأس الجدول */
    }
    
    .responsive-card-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }
    
    .responsive-card-table td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
    }
    
    .responsive-card-table td::before {
        content: attr(data-label); /* استخدام سمة data-label لعرض اسم العمود */
        float: left;
        font-weight: bold;
    }
}

<table class="responsive-card-table">
    <thead>
        <tr>
            <th>المنتج</th>
            <th>السعر</th>
            <th>الكمية</th>
            <th>المجموع</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="المنتج">لابتوب ديل</td>
            <td data-label="السعر">2500 ر.س</td>
            <td data-label="الكمية">1</td>
            <td data-label="المجموع">2500 ر.س</td>
        </tr>
    </tbody>
</table>

في هذا المثال، نستخدم سمة data-label لتظهر اسم العمود قبل كل قيمة على الشاشات الصغيرة.

🎯 نصائح مهمة لتصميم جداول متجاوبة

1. حافظ على البساطة: تجنب الجداول المعقدة ذات الأعمدة الكثيرة على الشاشات الصغيرة
2. استخدم العناوين الوصفية: تأكد أن عناوين الأعمدة واضحة ومعبرة
3. اختر البيانات المهمة: فكر في إخفاء بعض الأعمدة غير الضرورية على الشاشات الصغيرة
4. اختبر على أجهزة مختلفة: دائماً اختبر الجداول على أحجام شاشات متعددة

/* إخفاء أعمدة غير ضرورية على الشاشات الصغيرة */
@media screen and (max-width: 480px) {
    .hide-on-mobile {
        display: none;
    }
}

💡 مثال عملي متكامل

لنطبق ما تعلمناه في مثال عملي يدمج بين الطريقتين:

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* الحد الأدنى لعرض الجدول */
}

.data-table th,
.data-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

/* تحويل إلى بطاقات للشاشات الصغيرة جداً */
@media screen and (max-width: 600px) {
    .data-table {
        min-width: auto;
    }
    
    .data-table thead {
        display: none;
    }
    
    .data-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    .data-table td {
        display: block;
        text-align: right;
        border: none;
        border-bottom: 1px solid #eee;
    }
    
    .data-table td:last-child {
        border-bottom: none;
    }
    
    .data-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}