ریسپانسیو کردن جداول 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 است که توسط تیم طراحی سایت وب یار ترجمه شده و برای استفاده شما دوستان وب یاری قرار گرفته است.
برای آموزش های بیشتر با ما همراه باشید.
روزبه‌روز به تعداد افرادی که با استفاده از دستگاه موبایل خود وب را مرور می‌کنند افزوده میشود، از این رو ساخت و طراحی کردن سایت‌هایی که برای مرورگرهای موبایل هستند نسبت به گذشته از اهمیت چندانی برخودار شده‌است. در این مقاله قصد داریم به شما عزیزان نحوه ساخت وبسایت با گوشی را آموزش بدهیم. ساخت وب سایت با اپلیکیشن با پیشرفت روزافزون تکنولوژی، اپلیکیشن‌های گوشی هوشمند نیز از این قافله عقب نمانده و یک قدم فراتر برداشته‌اند. آن‌ها این امکان را به افراد می‌دهند تا بتوانند از طریق گوشی و تبلت خود به ساخت و ویرایش یک وبسایت بپردازند. اگر شما به دنبال تبلیغات و ایجاد یک کسب‌وکار هستید، ساخت و داشتن یک وبسایت ضروری است. این امکانی است اپلیکیشن‌ها در اختیار کاربران گذاشته‌اند تا با استفاده از آن‌ها بتوانند به راحتی وبسایت مورد نظر خود را بسازند. برخی از این اپلیکشین‌ها عبارت‌اند از: ۱.اپلیکیشن Milkshake اگر در ساخت وبسایت عجله دارید، به شما استفاده از اپلیکیشن Milkshake را پیشنهاد میکنیم. این اپلیکشین یک وبسایت ساز فوری است که این امکان را به شما می‌دهد تا در چند دقیقه بتوانید یک وبسایت برای خودتان بسازید. برای ساخت وبسایت با گوشی با استفاده از این اپلیکیشن لازم است ابتدا یک طرح را انتخاب کنید، سپس اطلاعات خود را وارد نموده و در آخر لینک‌ها را پیوست نمایید. این اپلیکشین به دلیل […]
ساخت سایت رایگان خارجی یکی از دغدغه‌های مهم افراد برای پیشبرد اهداف کاری است. در واقع ایجاد سایت توسط شرکت‌های معتبر، هزینه‌های زیادی در بر دارد، به همین دلیل است که افراد تلاش می‌کنند از طریق یادگیری نحوه ایجاد سایت به صورت رایگان و یا کمک گرقفتن از شرکت‌هایی که اقدام به ساخت سایت رایگان می‌کنند، این هزینه‌ها را برای خود به میزان قابل توجهی کاهش دهند. اما برای انجام این کار چه باید کرد؟ به طور کلی در فضای اینترنت آموزش‌های مختلفی برای این منظور ارائه شده است که مشاهده آن‌ها می‌تواند تا حد زیادی به شما برای این منظور کمک کند، اما راهنمایی گرفتن از شرکت‌های فعال طراحی سایت در این امر نیز یک مسئله ضروری است. در وهله اول لازم است که شما نوع سایتی را که می‌خواهید ایجاد کنید، انتخاب کنید. پس از آن یک قالب را به صورت سفارشی تعیین کنید و کار را آغاز کنید. برای ساخت سایت رایگان به چه چیزهایی نیاز است؟ ابتدا باید به دنبال یک سازنده سایت باشید، در واقع چنین شرکت‌هایی این امکان را به شما می‌دهند که پس از ساخت سایت، در فضای اینترنت جایگاه مناسبی برای خود به دست آورید. البته در هنگام تلاش برای کمک گرفتن از یک شرکت معتبر و باتجربه در این زمینه، حتما به چند نکته از جمله داشتن نمونه کار معتبر، داشتن […]
طراحی وبسایت به ساخت، راه‌اندازی و دیزاین صفحات وب گفته میشود که در ادامه با مزیت ساخت سایت در اصفهان آشنا می شویم. وب‌سایت‌ها با استفاده از زبان کدنویسی طراحی می‌شوند. اما امروزه با پیشرفت فناوری، توانایی‌ها و ویژگی‌های برنامه‌های ساخت وب‌سایت‌ها افزایش یافته و کار را برای برنامه‌نویسان و طراحان وب آسان‌تر کرده است. با توسعه فناوری و استفاده روز افزون مردم از تکنولوژی‌های پیشرفته و همینطور تاثیر شیوع کرونا، باعث شد تا مردم نیازهای خود را به صورت آنلاین و حضوری برطرف کنند. همینطور اکثر شرکت‌ها و حتی فروشگاه‌ها کلیه خدمات خود را به صورت اینترنتی در اختیار کاربران و مشتریان خود قرار می‌دهند. از این رو وب‌سایت‌ها اهمیت بسیار زیادی دارند. وب‌سایت‌ها انواع مختلفی از جمله وب‌سایت‌های فروشگاهی، شرکتی، خدماتی و… دارند. طراحی یک وبسایت حرفه‌ای می‌تواند شما را در جذب مشتری در اصفهان و شهر‌های دیگر کمک کند، مشتریانی که هم می‌توانند توریست باشند و هم از افراد خود اصفهان. طراحی یک وبسایت به خدماتی بستگی دارد که افراد می‌توانند به مشتریان خود ارائه دهند. افراد با طراحی یک وبسایت می‌تواند محصولات و یا خدمات خود را به همه مردم ایران و یا حتی جهان معرفی کنند. این خدمات می‌تواند خدمات فروشگاهی و راهبردی باشند. از این رو انتخاب شرکتی که بهترین و به روزترین خدمات ساخته وبسایت در اصفهان برای طراحی انواع وب‌سایت‌های تجاری را […]
دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]
طراحی قالب وردپرس امروزه طرفداران زیادی پیدا کرده است. وردپرس یک سیستم مدیریت محتوای قوی است که می توان با آن قالب های زیبایی طراحی کرد. در مطلب امروز وب یار می خواهیم با نحوه طراحی قالب وردپرس آشنا شویم. بیشتر سایت های دنیای وب امروزی با این سیستم مدیریت طراحی می شودو بازار کار خوبی دارد به ویژه اگر این قالب مختص کسب وکار شما باشد و با توجه به نیاز ها و سلایق شما طراحی شده باشد در این صورت است که علاوه برتکراری نبودن پاسخگوی نیازهای مجموعه شما می باشد. بررسی انواع قالب سایت قالب سایت چیست؟ ابتدا بهتر است کمی به تاریخچه آن بپردازیم. در آغاز قرن جاری و در زمانی که اینترنت هنوز در ابتدای راه خود بود، صفحات سایت‌ها به شکل ساده‌ای طراحی می‌شدند که از چند متن ساده، چند باکس رنگارنگ و شاید یک یا دو تصویر تشکیل شده بودند. تنها افرادی که دارای صفحات وب بودند، کسانی بودند که تخصص فنی در اچ‌تی‌ام‌‌ال برای ساختن یک صفحه سایت را داشتند یا می‌توانستند هزینه انجام این کار را به افرادی که این کار را می‌کردند، پرداخت کنند. اما از آن زمان تاکنون تغییرات زیادی صورت گرفته است و اکنون پلتفرم‌های آنلاین زیادی وجود دارند که به افرادی که تجربه طراحی یا برنامه‌نویسی نسبتا کمی دارند، توانایی اجرای یک وبسایت کاملاً کارآمد را می‌دهند. […]
ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام میشود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]
سلام ممنونم اما به صورت واضح بگید تو المنتور چه کار کنیم خب ..لون کدی که از افزونه گرفتیم تو المنوتر بین کدوم کدها قرار بدهیم ..؟ واضح تر بگید خب .ممنونم
لطفا برای یادگیری این مبحث در یوتیوب سرچ کنید
ببخشیدا واقعا غیر قابل فهم بود
سعی میکنیم با محتوای ساده تر توضیح بدیم. از انتقادتون متشکریم
عالی بود واقعا ممنون