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

.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 در صورت لزوم، به بهبود دسترس‌پذیری کمک می‌کند.

خلاصه کاربردی
نقشه راه ایجاد جداول ریسپانسیو و استاندارد

فهرست مطالب مقاله:

• چرا ریسپانسیو کردن جداول داده یک چالش بزرگ است؟
• راهکار استاندارد: اسکرول افقی ملایم (Smooth Scroll)
• کدنویسی عملی: پیاده‌سازی گام‌به‌گام جدول با HTML و CSS
• جدول مقایسه روش‌های مدیریت جداول در موبایل
• ارتقای تجربه کاربری (UX) در جداول عریض
• پیاده‌سازی در سیستم‌های مدیریت محتوا مانند وردپرس
• عیب‌یابی سریع و رفع مشکلات رایج (Troubleshooting)
• سوالات متداول (FAQ)

<div class="table-container">
  <table class="responsive-table">
    <thead>
      <tr>
        <th>نام محصول</th>
        <th>دسته‌بندی</th>
        <th>قیمت (تومان)</th>
        <th>موجودی</th>
        <th>امتیاز کاربران</th>
        <th>وضعیت</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>گوشی هوشمند پرچمدار</td>
        <td>کالای دیجیتال</td>
        <td>۴۵,۰۰۰,۰۰۰</td>
        <td>۱۲ عدد</td>
        <td>۴.۸ از ۵</td>
        <td><span class="badge active">موجود</span></td>
      </tr>
      <tr>
        <td>لپ‌تاپ تجاری ۱۵ اینچی</td>
        <td>کامپیوتر</td>
        <td>۶۲,۰۰۰,۰۰۰</td>
        <td>۳ عدد</td>
        <td>۴.۵ از ۵</td>
        <td><span class="badge active">موجود</span></td>
      </tr>
      <tr>
        <td>ساعت هوشمند ضدآب</td>
        <td>گجت پوشیدنی</td>
        <td>۸,۵۰۰,۰۰۰</td>
        <td>۰ عدد</td>
        <td>۴.۲ از ۵</td>
        <td><span class="badge inactive">ناموجود</span></td>
      </tr>
    </tbody>
  </table>
</div>

/* نگهدارنده اصلی جدول */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  
  /* فعال‌سازی شتاب‌دهنده سخت‌افزاری برای اسکرول فوق‌العاده نرم روی موبایل */
  -webkit-overflow-scrolling: touch;
}

/* استایل‌دهی به نوار اسکرول (Scrollbar) جهت حفظ زیبایی و هماهنگی */
.table-container::-webkit-scrollbar {
  height: 6px; /* ضخامت کم نوار اسکرول برای ظرافت بیشتر */
}

.table-container::-webkit-scrollbar-track {
  background: #f1f5f9; 
}
 
.table-container::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; 
}

/* استایل بدنه جدول */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-family: inherit;
  font-size: 14px;
}

.responsive-table th, 
.responsive-table td {
  padding: 14px 18px;
  white-space: nowrap; /* جلوگیری از شکستن ناگهانی خطوط در سلول‌ها */
  border-bottom: 1px solid #e2e8f0;
}

.responsive-table th {
  background-color: #f8fafc;
  color: #1e293b;
  font-weight: bold;
}

.responsive-table tbody tr:hover {
  background-color: #f1f5f9; /* افکت تغییر رنگ ردیف با هاور */
}

/* پلاک‌های رنگی برای وضعیت‌ها */
.badge {
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}
.badge.active {
  background-color: #d1fae5;
  color: #065f46;
}
.badge.inactive {
  background-color: #fee2e2;
  color: #991b1b;
}

💡 یک ایده عالی برای طراحان وب: با تعریف یک پوزیشن Sticky برای اولین ستون جدول (مانند نام محصول)، می‌توانید کاری کنید که در طول اسکرول افقی، ستون اول همیشه ثابت بماند تا کاربر در هر لحظه بداند اطلاعات در حال نمایش متعلق به کدام ردیف یا محصول است!

• مشکل ۱: اسکرول افقی روی دستگاه‌های اپل (iOS) لگ دارد یا نرم نیست.
  پاسخ: اطمینان حاصل کنید که خط کد -webkit-overflow-scrolling: touch; به کانتینر اصلی استایل داده شده است. این خط از ویژگی‌های بومی وب‌کیت برای شتاب‌دهی لمسی استفاده می‌کند.
• مشکل ۲: متن سلول‌ها شکسته می‌شود و به خط بعدی می‌رود و ظاهر جدول را به هم می‌ریزد.
  پاسخ: صفت white-space: nowrap; را در CSS به تگ‌های th و td اضافه کنید. این کد از کوچک شدن عرض سلول‌ها جلوگیری کرده و آنها را مجبور به حفظ اندازه یکپارچه خود می‌کند.
• مشکل ۳: کل صفحه وب‌سایت من دچار اسکرول افقی شده است.
  پاسخ: احتمالاً تگ <table> را مستقیماً بدون کانتینر بیرونی قرار داده‌اید یا تگ نگهدارنده فاقد خصوصیت overflow-x: auto; یا width: 100%; است.

آیا این روش روی سئوی وب‌سایت تأثیر منفی دارد؟

خیر، کاملاً برعکس. گوگل به شدت روی تست ریسپانسیو موبایل حساس است. این روش به ربات‌های گوگل اعلام می‌کند که محتوا درون محدوده‌ای مشخص مدیریت شده است و اسکرول کل صفحه خراب نشده است، که همین عامل باعث بهبود چشمگیر رتبه صفحات شما در نتایج موبایل می‌شود.

چگونه می‌توانیم اسکرول بار پیش‌فرض مرورگر را در ویندوز مخفی یا شخصی‌سازی کنیم؟

بسیار ساده است. کدهای مربوط به ::-webkit-scrollbar که در بخش کدنویسی قرار داده‌ایم دقیقاً وظیفه زیباسازی و کنترل سایز اسکرول‌بار در مرورگرهای کروم، اج و سافاری را به عهده دارند تا نوار اسکرول سیستم‌عامل جلوه بصری وبسایت شما را زشت نکند.

آیا می‌توان برای ستون اول قابلیت چسبندگی (Sticky Column) ایجاد کرد؟

بله، با اختصاص دادن استایل‌های position: sticky; right: 0; z-index: 10; به سلول‌های اولین ستون جدول، آن ستون همیشه در موقعیت خود ثابت باقی می‌ماند در حالی که سایر ستون‌ها به زیر آن اسکرول می‌شوند.