طراحی جدول ریسپانسیو با HTML و CSS برای موبایل و دسکتاپ

جدول ها روی دسکتاپ معمولا مشکلی ندارند، اما کافی است همان جدول را روی موبایل باز کنی تا همه چیز بهم بریزد. ستون ها بیرون می زنند، اسکرول افقی اعصاب خردکن می شود و خوانایی می افتد. طراحی جدول ریسپانسیو با html و css یعنی جدول را طوری بسازی که هم روی دسکتاپ مرتب باشد، هم روی موبایل قابل خواندن بماند، بدون اینکه کاربر مجبور شود زوم کند یا دنبال ستون ها بگردد.

چرا جدول ها روی موبایل به مشکل می خورند

مشکل اصلی این است که جدول ذاتا افقی است و تعداد ستون ها هرچه بیشتر شود، عرض مورد نیاز بالا می رود. موبایل عرض کمی دارد و مرورگر مجبور می شود یا فونت را ریز کند یا اسکرول افقی بدهد. اگر هیچ فکری برای این شرایط نکنی، تجربه کاربر خراب می شود.

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

برای جدول ریسپانسیو با html و css چند راه رایج داریم. ساده ترین راه این است که در موبایل اسکرول افقی کنترل شده بدهی. راه بهتر این است که در موبایل جدول را به شکل کارت یا لیست نمایش دهی تا هر ردیف به یک بلوک قابل خواندن تبدیل شود. انتخاب بین این دو بستگی به نوع داده دارد. اگر جدول خیلی عریض است، کارت کردن معمولا بهترین تجربه را می دهد.

روش اول: اسکرول افقی تمیز و کنترل شده

این روش برای زمانی خوب است که کاربر واقعا باید همه ستون ها را کنار هم ببیند، مثل جدول قیمت یا گزارش های مقایسه ای. نکته مهم این است که اسکرول را روی یک wrapper انجام بدهی تا خود صفحه اسکرول افقی نگیرد.

کد HTML

<div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>نام</th>
        <th>پلن</th>
        <th>وضعیت</th>
        <th>تاریخ</th>
        <th>مبلغ</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>علی</td>
        <td>Premium</td>
        <td>فعال</td>
        <td>2026-01-31</td>
        <td>290,000</td>
      </tr>
      <tr>
        <td>مریم</td>
        <td>Basic</td>
        <td>غیرفعال</td>
        <td>2026-01-29</td>
        <td>120,000</td>
      </tr>
    </tbody>
  </table>
</div>

کد CSS

.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}

.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.table th,
.table td{
  padding: 12px 14px;
  border-bottom: 1px solid #efefef;
  text-align: right;
  white-space: nowrap;
}

.table thead th{
  font-weight: 600;
  background: #fafafa;
}

.table tbody tr:hover{
  background: #fcfcfc;
}

این روش ساده است و خیلی جاها جواب می دهد، اما برای موبایل های کوچک همچنان کاربر مجبور است اسکرول کند.

روش دوم: تبدیل جدول به کارت در موبایل

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

کد HTML

نکته کلیدی در این روش استفاده از data-label روی td است تا عنوان ستون در موبایل نمایش داده شود.

<table class="rtable">
  <thead>
    <tr>
      <th>نام</th>
      <th>پلن</th>
      <th>وضعیت</th>
      <th>تاریخ</th>
      <th>مبلغ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="نام">علی</td>
      <td data-label="پلن">Premium</td>
      <td data-label="وضعیت">فعال</td>
      <td data-label="تاریخ">2026-01-31</td>
      <td data-label="مبلغ">290,000</td>
    </tr>
    <tr>
      <td data-label="نام">مریم</td>
      <td data-label="پلن">Basic</td>
      <td data-label="وضعیت">غیرفعال</td>
      <td data-label="تاریخ">2026-01-29</td>
      <td data-label="مبلغ">120,000</td>
    </tr>
  </tbody>
</table>

کد CSS

.rtable{
  width: 100%;
  border-collapse: collapse;
}

.rtable th,
.rtable td{
  padding: 12px 14px;
  border-bottom: 1px solid #efefef;
  text-align: right;
}

.rtable thead th{
  background: #fafafa;
  font-weight: 600;
}

@media (max-width: 640px){
  .rtable thead{
    display: none;
  }

  .rtable,
  .rtable tbody,
  .rtable tr,
  .rtable td{
    display: block;
    width: 100%;
  }

  .rtable tr{
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
  }

  .rtable td{
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
  }

  .rtable td::before{
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    flex: 0 0 40%;
  }
}

حس خروجی این می شود که هر ردیف مثل یک کارت مرتب است و کاربر روی موبایل بدون اسکرول افقی همه چیز را می فهمد.

چند نکته ریز که جدول را واقعا حرفه ای می کند

اگر اعداد و قیمت داری، بهتر است راست چین باشد و از white-space: nowrap استفاده کنی که خط نشکند. اگر ستون ها خیلی زیاد هستند، روش کارت بهترین تجربه را می دهد. اگر کاربر باید ستون ها را کنار هم مقایسه کند، اسکرول افقی کنترل شده منطقی تر است. برای جدول های بزرگ، hover و zebra striping کمک می کند چشم سریع تر ردیف ها را دنبال کند.

اشتباهات رایج در طراحی جدول ریسپانسیو

یکی اینکه برای موبایل فقط فونت را کوچک می کنند، این کار خوانایی را نابود می کند. یکی دیگر اینکه کل صفحه را اسکرول افقی می کنند که تجربه را خراب می کند. اشتباه سوم این است که در حالت کارت، عنوان ستون ها را حذف می کنند و کاربر نمی فهمد هر مقدار مربوط به چیست. روش data-label دقیقا این مشکل را حل می کند.

جمع بندی

جدول ریسپانسیو با html و css یعنی تجربه درست روی موبایل، نه فقط درست دیده شدن روی دسکتاپ. اگر جدول برای مقایسه است، اسکرول افقی کنترل شده انتخاب خوبی است. اگر جدول برای خواندن اطلاعات هر ردیف است، تبدیل به کارت در موبایل بهترین گزینه است. با همین دو روش، تقریبا هر جدول واقعی را می توانی بدون JavaScript ریسپانسیو و تمیز پیاده سازی کنی.