ساخت جداول داده (Data Tables) کاملاً ریسپانسیو با اسکرول افقی ملایم

🚀 نقشه راه جداول ریسپانسیو: خلاصه در یک نگاه

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* برای اسکرول روان در iOS */
}

.table-wrapper::-webkit-scrollbar {
    height: 8px; /* ارتفاع اسکرول‌بار افقی */
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(52, 152, 219, 0.7); /* رنگ دکمه اسکرول‌بار */
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-track {
    background-color: #ecf0f1; /* رنگ پس‌زمینه اسکرول‌بار */
    border-radius: 10px;
}

table {
    width: 100%; /* اطمینان حاصل کنید که جدول عرض کامل را دارد */
    border-collapse: collapse;
}

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>ردیف</th>
                <th>نام محصول</th>
                <th>قیمت</th>
                <th>موجودی</th>
                <th>توضیحات طولانی محصول</th>
                <th>تاریخ تولید</th>
                <th>شناسه کالا</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>لپ‌تاپ گیمینگ X10</td>
                <td>55,000,000</td>
                <td>موجود</td>
                <td>جدیدترین نسل پردازنده‌ها با کارت گرافیک RTX 4090.</td>
                <td>1402/10/01</td>
                <td>LTX10-G-987</td>
            </tr>
            <tr>
                <td>2</td>
                <td>مانیتور خمیده سامسونگ</td>
                <td>12,000,000</td>
                <td>موجود</td>
                <td>مانیتور 34 اینچ با نرخ رفرش 144 هرتز و رزولوشن 4K.</td>
                <td>1402/05/15</td>
                <td>MON-SM-34C</td>
            </tr>
        </tbody>
    </table>
</div>

نکته طلایی: برای اسکرول افقی ملایم‌تر، می‌تونی از scroll-behavior: smooth; روی عنصر html یا کانتینر جدول استفاده کنی، البته این فقط روی اسکرول با کد (مثل جاوااسکریپت) یا با حرکت تاچ اثر میذاره.

@media screen and (max-width: 768px) {
    table {
        border: 0;
    }

    table caption {
        font-size: 1.3em;
    }

    table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table tr {
        border: 1px solid #ddd;
        display: block;
        margin-bottom: .625em;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
        padding: .625em 1em;
        position: relative;
    }

    table td::before {
        content: attr(data-label);
        float: right;
        font-weight: bold;
        margin-right: 10px;
        color: #555;
    }

    table td:last-child {
        border-bottom: 0;
    }
}

<table>
    <caption>لیست کاربران</caption>
    <thead>
        <tr>
            <th scope="col">نام</th>
            <th scope="col">ایمیل</th>
            <th scope="col">نقش</th>
            <th scope="col">وضعیت</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="نام">علی احمدی</td>
            <td data-label="ایمیل">ali.ahmadi@example.com</td>
            <td data-label="نقش">مدیر</td>
            <td data-label="وضعیت">فعال</td>
        </tr>
        <tr>
            <td data-label="نام">مریم حسینی</td>
            <td data-label="ایمیل">maryam.h@example.com</td>
            <td data-label="نقش">کاربر عادی</td>
            <td data-label="وضعیت">غیرفعال</td>
        </tr>
    </tbody>
</table>

.table-wrapper-sticky {
    overflow-x: auto;
    position: relative;
}

.table-wrapper-sticky table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper-sticky th:first-child,
.table-wrapper-sticky td:first-child {
    position: sticky;
    left: 0;
    background-color: #fff; /* پس‌زمینه برای عدم تداخل با اسکرول */
    z-index: 1;
    border-right: 1px solid #ddd;
}

.table-wrapper-sticky thead th:first-child {
    z-index: 2; /* اگر head هم sticky بود */
}

function toggleTableColumns() {
    const table = document.querySelector('.my-responsive-table');
    if (!table) return;

    const isMobile = window.matchMedia('(max-width: 768px)').matches;
    const columnsToHide = ['توضیحات طولانی محصول', 'شناسه کالا']; // ستون‌هایی که می‌خواهیم پنهان کنیم

    const headers = Array.from(table.querySelectorAll('th'));
    const headerIndexesToHide = columnsToHide.map(colName =>
        headers.findIndex(th => th.textContent.includes(colName))
    ).filter(idx => idx !== -1);

    table.querySelectorAll('tr').forEach(row => {
        row.querySelectorAll('th, td').forEach((cell, index) => {
            if (headerIndexesToHide.includes(index)) {
                cell.style.display = isMobile ? 'none' : '';
            }
        });
    });
}

// فراخوانی هنگام بارگذاری صفحه و تغییر سایز
window.addEventListener('DOMContentLoaded', toggleTableColumns);
window.addEventListener('resize', toggleTableColumns);

مشکل ۱: جدول از کادر صفحه بیرون می‌زند و اسکرول افقی ناخوشایند ایجاد می‌کند.

راه‌حل: اطمینان حاصل کنید که جدول درون یک div با استایل overflow-x: auto; قرار گرفته است. کدهای CSS ما را برای سفارشی‌سازی اسکرول‌بار فراموش نکنید.

مشکل ۲: متن‌های داخل سلول‌ها روی هم می‌افتند یا خیلی فشرده نمایش داده می‌شوند.

راه‌حل: از روش “تبدیل به کارت” برای نمایش در موبایل استفاده کنید. این کار باعث می‌شود هر سلول در یک خط جداگانه با عنوان مربوطه نمایش داده شود. همچنین از word-wrap: break-word; یا overflow-wrap: break-word; در CSS برای جلوگیری از سرریز شدن کلمات طولانی استفاده کنید.

مشکل ۳: ستون‌های مهم جدول در اسکرول افقی از دید خارج می‌شوند.

راه‌حل: از روش “چسباندن ستون اول” (Sticky First Column) با استفاده از position: sticky; در CSS استفاده کنید. این تضمین می‌کند که ستون‌های کلیدی همیشه در دید کاربر باقی بمانند.

مشکل ۴: جدول در برخی مرورگرها یا دستگاه‌ها به درستی نمایش داده نمی‌شود یا باگ‌های عجیب دارد.

راه‌حل: همیشه جداول خود را در مرورگرها و دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) تست کنید. استفاده از پیشوندهای وندور (Vendor Prefixes) برای ویژگی‌های CSS خاص (مثل -webkit-overflow-scrolling) را فراموش نکنید. اگر از وردپرس استفاده می‌کنید، مطمئن شوید که قالب یا افزونه‌های شما تداخلی با کدهای HTML و CSS شما ندارند.

مشکل ۵: برای جداول پیچیده با قابلیت‌های جستجو، مرتب‌سازی و صفحه‌بندی، پیاده‌سازی دستی زمان‌بر و دشوار است.

راه‌حل: از کتابخانه‌های جاوااسکریپت آماده مانند DataTables.js استفاده کنید. این کتابخانه‌ها بیشتر این قابلیت‌ها را به صورت خودکار فراهم می‌کنند و حتی برای ریسپانسیو بودن هم راه‌حل‌های داخلی دارند. برای مشاهده اسنیپت‌های مرتبط، به صفحه اصلی اسنیپت‌ها در FA-Tools سر بزنید.

چرا جداول داده در طراحی ریسپانسیو مشکل‌ساز هستند؟

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

بهترین روش CSS برای ریسپانسیو کردن جداول چیست؟

روش overflow-x: auto; روی یک کانتینر والد، ساده‌ترین راه است. اما روش “تبدیل به کارت” (Card Layout) که در آن هر سطر جدول به یک بلوک یا کارت عمودی تبدیل می‌شود، تجربه کاربری بهتری در موبایل ارائه می‌دهد.

آیا همیشه باید از جاوااسکریپت برای جداول ریسپانسیو استفاده کرد؟

خیر، برای جداول ساده و متوسط، CSS به تنهایی کافی است. اما برای جداول پیچیده با قابلیت‌هایی مانند جستجو، مرتب‌سازی، صفحه‌بندی یا مدیریت تعداد زیاد داده‌ها، استفاده از کتابخانه‌های جاوااسکریپت (مانند DataTables.js) یا کد سفارشی JS توصیه می‌شود.

چگونه می‌توان اسکرول افقی جداول را نرم‌تر کرد؟

می‌توانید از ویژگی scroll-behavior: smooth; روی کانتینر جدول یا عنصر html استفاده کنید. همچنین، سفارشی‌سازی ظاهر اسکرول‌بار با ::-webkit-scrollbar (برای مرورگرهای مبتنی بر WebKit) می‌تواند ظاهر بهتری به اسکرول‌بار بدهد.

چرا دسترس‌پذیری در جداول ریسپانسیو مهم است؟

دسترس‌پذیری تضمین می‌کند که جداول شما برای همه کاربران، از جمله افرادی که از صفحه‌خوان یا ناوبری کیبورد استفاده می‌کنند، قابل فهم و قابل تعامل باشند. استفاده صحیح از تگ‌های HTML معنایی (مثل <th scope="col">) و ویژگی‌های ARIA در صورت لزوم، به بهبود دسترس‌پذیری کمک می‌کند.