آموزش طراحی 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. اجباری نبوده و فقط برای دیزاین جداول شما میباشد . اگر نیازی به دیزاین ندارید و یا خودتان از قبل دیزاین جدول را انجام داده اید , میتوانید تمامی کد ها را بجز کلاس ذکر شده پاک نمایید .

پخش اختصاصی

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