در Aspro: بعد، با شروع از نسخه 1.1.7، می توانید جداول را برای آن تطبیق دهید نسخه موبایل. باید تغییراتی در آن ایجاد شود منبعصفحات - یک کلاس اضافه کنید که مسئول سازگاری جداول است.

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

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

قبل از تگ افتتاحیه

یک برچسب با کلاس اضافه کنید.

بعد از تگ بسته شدن

برچسب را وارد کنید

...

تغییرات خود را ذخیره کنید

حالا جدول اسکرول می شود و از قاب فراتر نمی رود.

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

ما باید کلاس "swipeignore" را به برچسبی که قبلا اضافه کردیم اضافه کنیم. در نتیجه قبل از تگ

یک برچسب با کلاس ها باید مشخص شود.

...

تغییرات خود را ذخیره کنید

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

هنگام پیمایش به راست و در سایر صفحات می توانید منوی کناری را پنهان کنید. باید کلاس «swipeignore» را به تگ بلوکی که می‌خواهید نمایش منوی کناری آن را حذف کنید، اضافه کنید. اگر تگ کلاس مشخصی نداشت، به شکل . اگر تگ قبلاً کلاس‌هایی اضافه کرده است، برای مثال، «swipeignore» را بنویسید که با فاصله از هم جدا شده است.

اگر از جداول در سایت استفاده می کنید، آنها نیز باید با آنها سازگار شوند دستگاه های تلفن همراه. من از دو گزینه تطبیق استفاده می کنم - فشرده سازی و بسته بندی کلمه + ترتیب جداول در یک ستون.

گزینه اول برای تمام جداول چند ستونی مناسب است؛ من از گزینه دوم در برخی از سایت های جلویی استفاده می کنم. در نمایش منوها به صورت جدول چنین ضعفی وجود دارد، اما با کاهش وضوح، آنقدر فشرده می شوند که باعث عصبانیت کاربر می شود. ترجمه با وضوح پایین در یک ستون - تصمیم خوب، اما باز هم، شما نباید از آن برای همه جداول استفاده کنید.

گزینه اصلی

بنابراین، برای اکثر جداول موجود در سایت از کد css زیر استفاده می کنم:

صفحه رسانه @ و (حداکثر عرض: 1000 پیکسل) (td(word-break: break-all;)

مشخص می کند که کلماتی که در بلوک قرار نمی گیرند باید با وضوح کمتر از 1000 پیکسل شروع شوند. خط جدید. رزولوشن 1000 یک مثال است، به سایت های خود نگاه کنید، برای برخی منطقی است که رزولوشن پایین تر را تنظیم کنید.

رسیدن نمایشگر خوبجدول با استفاده از دو کد در CSS امکان پذیر است. من به صورت موازی استفاده می کنم:

صفحه رسانه @ و (حداکثر عرض: 700 پیکسل) (img (حداکثر عرض: 96٪ !مهم؛ ارتفاع: خودکار !مهم؛) فریم، ناحیه متنی، ورودی، دکمه، ارسال، ویدیو، شی، جاسازی (حداکثر عرض: 99% !important;) جدول، دهانه، div، ins (حداکثر عرض: 100% !مهم؛)

بیان می کند که با وضوح کمتر از 700 پیکسل، جدول در اندازه 100٪ نمایش داده می شود، یعنی فشرده است، اما کل بلوک را در عرض اشغال می کند. خاصیت!important نشان می دهد که برای تمام وضوح های کوچکتر از 700 پیکسل اعمال می شود.

انطباق در یک ستون

تطبیق جدول به گونه ای که در یک ستون با وضوح پایین نمایش داده شود دشوارتر است. برای همه میزها مناسب نیست، اما اغلب ضروری است. ابتدا کلاس اصلی جدول را مشخص کنید، برای مثال،