ریسپانسیو کردن جداول responsive table

خانه » بلاگ » bootstrap » ریسپانسیو کردن جداول responsive table

چگونگی ساخت جدول رسپانسیو:

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

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

در آموزش های قبلی در خصوص ریسپانسیو کردن صفحات وب با مطلب آموزش طراحی منو رسپانسیو Responsive در خدمت شما بودیم.

البته باید یادآوری کنم که استفاده کردن از div به جای جداول جایگزین شده است و افرادی که با طراحی وب سایت بهینه شده آشنایی داشته باشند میدانند که استفاده کردن از Table دیگر مرسوم نبوده و div جایگزین table شده است.بنابراین از همینجا به این نکته توجه کنید که یک div را پیرامون table خود قرار دهید.

راه حل اول ریسپانسیو کردن جداول responsive table solution:

اولین راه حل بسیار ساده میباشد و کافیست که شما در اطراف تگ table خود یک تگ div قرار دهید.به مثال زیر توجه کنید:

<div class=”table-container”>

        <table>

               …

        <table>

</div>

در مرحله بعد کدهای css لازم را به آن اضافه کنید.

.table-container{width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em;}

راه حل دوم ریسپانسیو کردن جداول

شما میتوانید کد سی اس اس اسکرول بار را اضافه کنید

کافیست که به کدهای css مربوط به جداول خود کدهای زیر را اضافه کنید، تا جدول شما به صورت ریسپانسیو نمایش داده شود.

.table-container::-webkit-scrollbar{ -webkit-appearance: none; width: 14px; height: 14px;}

 .table-container::-webkit-scrollbar-thumb{border-radius: 8px; border: 3px solid #fff;  background-color: rgba(0, 0, 0, .3);}

راه حل سوم ریسپانسیو کردن جداول(اضافه کردن گرادینت):

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

<div class=”table-container-outer”>

        <div class=”table-container-fade”>

               <div class=”table-container”>

<table>   …  <table></div></div></div>

در مرحله ی بعدی کدهای css  لازم را به آن اضافه کنید.

.table-container-outer { position: relative; }

 .table-container-fade{

position: absolute;  right: 0;width: 30px;height: 100%;

background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

 background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

 background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);}

 

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

نحوه ریسپانسیو نمودن جدول در وردپرس

برای نمایش درست جداول در گوشی ها از CSS  کمک میگیریم. برای ایجاد تغییرات در فایل های CSS ابتدا وارد بخش نمایش > ویرایشگر پوسته ها در پنل وردپرس شوید و فایل style.css را برای ویرایش انتخاب کنید.

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

table{
width:100%;
max-width:100%;
}

برای ریسپانسیو کردن  جدول برای سایت وردپرسی در حالت نمایش موبایلی قطعه کد زیر را به فایل CSS  اضافه نمایید.

@media screen and (max-width:980px){ table{ display:block; overflow-x:auto; } }

این آموزش ترجمه ی چگونگی ریسپانسیو کردن جداول  بر گرفته از آموزش responsive table solution است که توسط تیم طراحی سایت وب یار ترجمه شده و برای استفاده شما دوستان وب یاری قرار گرفته است.

برای آموزش های بیشتر با ما همراه باشید.