031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

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

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

۱۱ام بهمن ۱۳۹۴
پشتیبانی وب یار
466

ریسپانسیو کردن جداول 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;}

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

شما میتوانید کد سی اس اس اسکرول بار را اضافه کنیدadding scrollbars for iOS:

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

.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);}

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

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

ریسپانسیو کردن جداول responsive table
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی میک رویال

طراحی سایت فروشگاه اینترنتی میک رویال طراحی سایت فروشگاهی میک رویال با رعایت اصول سئو در کدنویسی یکی از نمونه کارهای حرفه ای تیم طراحی سایت وب یار است. فروشگاه میک رویال در زمینه ی فروش قاب موبایل ، تیشرت ، گردنبند ، دستبند ، سرکلیدی ، کوسن ، بالشت و رو تختی فعالیت دارد. […]

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

نکات مهم در طراحی سایت

طراحی سایت

اهمیت طراحی سایت طراحی سایت برای داشتن یک کسب و کار موفق و پردرآمد و برای به دست آوردن اعتبار در زمینه شغلی اهمیت ویژه ای دارد. برای بالا بردن ارزش یک ‌سایت و جذب بازدیدکنندگان به هیچ معجزه ای احتیاج ندارید فقط باید نکات و اصول طراحی سایت را رعایت کنید. در این مقاله […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

ارسال دیدگاه

  1. سعید حبیبی گفت:

    عالی بود واقعا ممنون

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما کاملا واضح در میان بگذارید

برای گفتگو کلید ENTER را بفشارید