جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش طراحی Table های ریسپانسیو در وب سایت

یکی از بزرگترین مشکل هایی که پیرامون ریسپانسیو ساختن وب سایت وجود دارد , ساخت جدول ذر این نوع وب سایت ها میباشد .

جداولی که دارای تعداد ستون های زیادی هستند , در موبایل به دلیل پهنای کم ,  بسیار جمع شده و به صورت ناخوانایی در می آیند .

در این پست از وب سایت اسکریپت دات کام , روشی بسیار ساده و جالب را آموزش خواهم داد که به کمک آن میتوانید جداول را در سایز های بسیار کوچک مانند موبایل , به صورت اسکرول افقی در بیاورید تا از بهم ریختن آن در سایز های پایین جلوگیری کنید .

ضمنا علاوه بر آموزش این کار , سعی بر ساخت یک جدول ساده , زیبا و شیک را هم داریم …

آموزش طراحی Table های ریسپانسیو در وب سایت

در ابتدا شما کافیست کد های css زیر را در قسمت css وب سایت خود وارد نمایید : ( ترجیحا در بالای css )

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    direction:ltr;
}
th, td {
    border: none;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){
    background-color: #f2f2f2;
}
.vms-responsive{
    overflow-x:auto !important;
}

حال برای ساخت جدول به شیوه ی معمول در html ادامه دهید , فقط با این تفاوت که از این به بعد , هر جدولی که میخواهید خاصیت ریسپانسیو را داشته باشد , یک تگ پدر div برای آن ایجاد کرده و به آن کلاس vms-responsive را بدهید . مانند مثال زیر :

<div class="vms-responsive">
  <table>
    ...
  </table>
</div>

نکته بسیار مهم : در بالا ( قسمت css ) , قطعه کد های اولی بجز vms-responsive. اجباری نبوده و فقط برای دیزاین جداول شما میباشد . اگر نیازی به دیزاین ندارید و یا خودتان از قبل دیزاین جدول را انجام داده اید , میتوانید تمامی کد ها را بجز کلاس ذکر شده پاک نمایید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

3 پاسخ به “آموزش طراحی Table های ریسپانسیو در وب سایت”

  1. عارف گفت:

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

    • وحید مجیدی صدر گفت:

      سلام دوست عزیز . احتمالا شما از rtl استفاده میکنید

      لطفا به جدول direction:ltr بدهید

    • رهگذر گفت:

      باسلام و عرض ادب
      دوست عزیز شما باید متای لازم برای ریسپانسیو کردن یک صفحه رو درون صفحه ی html تان قرار دهید.
      این دستور باید در بین قسمت هد یا head یک صفحه html قرار بگیرد.
      دستور زیر همان متای لازم می باشد فقط بجای علامت های پرانتز ( و ) شما را بگذارید.
      (meta name=”viewport” content=”width=device-width, initial-scale=1.0″)
      با وجود دستور بالا دیگه صفحه ی شما درون موبایل ها،تبلت ها و .. نمایش داده می شود.
      باتشکر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *