/*
  این استایل ها امکان اسکرول افقی (Horizontal Scroll) را
  برای جداول بزرگ در دستگاه های کوچک فراهم می کند.
*/
.responsive-table-wrap {
    /* اطمینان از اینکه عرض wrapper از محتوای والد فراتر نرود */
    max-width: 100%;
    /* این خاصیت برای ایجاد اسکرول افقی حیاتی است */
    overflow-x: auto;
    /* این ویژگی تضمین می کند که wrapper بصورت بلوک نمایش داده شود */
    display: block;
    /* (اختیاری) افزودن استایل ظاهری برای اسکرول بار */
    /* -webkit-overflow-scrolling: touch; */
}

/* برای اطمینان از اینکه محتوای جدول فشرده نشود */
.responsive-table-wrap table {
    width: 100%; /* این مقدار را می توانید بر اساس نیاز تغییر دهید */
    min-width: 600px; /* یا هر عرض دیگری که می خواهید جدول قبل از اسکرول بگیرد */
    border-collapse: collapse;
}

/* اگر جداول شما دارای استایل های خاصی هستند، می توانید آنها را اینجا اضافه کنید */
.responsive-table-wrap table th,
.responsive-table-wrap table td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border: 1px solid #ddd;
}