Moslashuvchan veb-saytlar uzoq vaqtdan beri qiziqishni to'xtatdi va ular tobora keng tarqalgan. Qidiruv tizimining reytinglari bilan so'nggi yangiliklarni hisobga olgan holda (agar kimdir bilmasa, mobil qurilmadan qidirishda javob beruvchi saytlarga ustunlik beriladi), bunday saytlar soni o'sishda davom etadi. Siz mobil qurilmalar uchun moslashishga qarshi bo'lishingiz mumkin yoki uni qo'llab-quvvatlaysiz, lekin haqiqat saqlanib qolmoqda: tobora ko'proq mijozlar o'z veb-saytlarini moslashtirishni talab qilmoqdalar va veb-ustalar buni qilishlari kerak.

Saytni turli ruxsatlarga moslashtirishda asosiy muammolardan biri bu jadvallardir. Ayniqsa, ular juda ko'p ma'lumotlarni o'z ichiga olgan bo'lsa. Keling, sezgir jadvalni joylashtirishning ikkita usulini ko'rib chiqaylik.

Birinchidan, jadval qanday ko'rinishini ko'rib chiqaylik:

Rostini aytaylik: bunday jadvalni chinakam moslashuvchan deb atash mumkin emas. Bu mobil telefonda yaxshi ko'rinadi, hech qanday joyda hech narsa yopishmaydi va saytning tartibi "oqmaydi". Agar saytingizda jadvallar kamdan-kam bo'lsa va ular tufayli ba'zi plaginlarni ulash va qo'shimcha uslublarni yozishdan foyda yo'q bo'lsa, bu usul juda mos keladi. Ushbu usul Bootstrap tomonidan qo'llaniladi. Xo'sh, bu qanday ishlaydi?

Hammasi oddiy: stol div bilan o'ralgan bo'lib, u maksimal 100% kengligi va to'lib ketishiga o'rnatiladi: avtomatik.

Agar stol uzun bo'lsa, siz maksimal balandlikni o'rnatishingiz va stol sarlavhasini tuzatishingiz mumkin.

Natija, xuddi quyidagi misol kabi, ushbu sahifada ko'rish mumkin.

Agar saytingizda tez-tez jadvallar mavjud bo'lsa, Footable plaginidan foydalanish mantiqan to'g'ri keladi.

Avval plaginni ulashingiz kerak (uni GitHub-ga yuklab oling yoki CDN-dan ulang) va uni ishga tushirishingiz kerak:

$(funksiya() ( $(".jadval").footable(); ));

Bu erda biz bir narsani aniqlashtirishimiz kerak: negadir skript ko'rish oynasining kengligini emas, balki jadvalning kengligini hisoblaydi. Buni tuzatish uchun siz skriptni biroz "modernizatsiya qilishingiz" kerak:

JQuery(funksiya () ( jQuery(".table").footable((countWidthOverride: function() (qaytish (kenglik: jQuery(window).width()); ) ); ))

Initsializatsiyada, agar biz saytdagi barcha jadvallar moslashuvchan bo'lishini xohlasak, jadval sinfini yoki faqat jadval tegini belgilaymiz.

Bularning barchasi nimani anglatadi? Planshetlarda "RAM", "Diagonal", "PPI" va "Batareya" ustunlari yashirin bo'ladi. Telefonlarga qisqartirilganda, "Narx" ustuni ham ularga qo'shiladi.

Tekshirish nuqtalari ishga tushirishda ko'rsatilishi mumkin:

JQuery(funktsiya () ( jQuery(".table").footable((countWidthOverride: function() ( qaytish (kenglik: jQuery(window).width()); ), uzilish nuqtalari: ( mobil: 0, planshet: 720, ish stoli: 1024 )))))

Bu shuni anglatadiki, 0-720 oralig'ida qoida mobil uchun, 720-1024 planshet uchun va 1024 dan yuqori ish stoli uchun amal qiladi. Agar kerak bo'lsa, qo'shimcha qoidalarni yaratishga hech narsa to'sqinlik qilmaydi.

Bundan tashqari, ba'zi ustunlar sukut bo'yicha kengaytirilganligiga ishonch hosil qilishingiz mumkin. Buning uchun ma'lumotlar atributini belgilang data-expanded="true"

Plaginning imkoniyatlari shu bilan tugamaydi, lekin bu moslashuvchan jadvallarni yaratish uchun etarli. Keyingi safar boshqa imkoniyatlarni ko'rib chiqamiz.

Jadvallar yomon ekanligi har qanday maket dizayneriga sir emas. Ularni moslashtirish va sozlash qiyin. Agar saytning ish stoli versiyasida jadval yaratish hali ham juda oson bo'lsa, adaptiv tartib boshlanganda hamma narsa do'zaxga tushadi.

Aslida, samarali variantlardan biri bu jadval uchun gorizontal aylantirishni yaratishdir. Buni qilish qiyin emas, lekin bugungi post bu haqda emas. Biroq, men buni sizga ko'rsataman.

Keling, hamma narsani uslublashtiramiz (asosan, biz stol o'ramini bezashimiz kerak).

Jadvalni oʻrash (matnni tekislash: markaz; displey: inline-blok; fon rangi: #fff; toʻldirish: 2rem 2rem; rang: #000; ) @media ekrani va (maksimal kenglik: 600px) ( .table-wrap (toshib-y: aylantiring; ))

Natijada, 600 pikselgacha bo'lgan kenglikda jadval aylantiriladi, lekin sayt aylanmaydi. Qulay, lekin bugun men boshqa narsa haqida gapirmoqchiman.
Jadvalga javob berishga yana bir qiziqarli yondashuvni topdim. U ma'lumotlar atributlari va psevdo-sinflardan foydalanishdan iborat. Endi men sizga hamma narsani ko'rsataman.

Birinchidan, belgini o'zgartiramiz:

Biz har bir ustunga ma'lumotlar yorlig'i atributini berdik, bu kelajakda biz uchun foydali bo'ladi.

Asosiy uslublarni o'rnating:

tana (matnni tekislash: markaz; toʻldirish tepasi: 10%; shrift-oila: sans-serif; fon-tasvir: url("bg.jpg"); fon oʻlchami: qopqoq; balandlik: 100vh; rang: #fff ; ) .table-wrap (matnni tekislash: markaz; displey: inline-blok; fon rangi: #fff; to‘ldirish: 2rem 2rem; rang: #000; ) jadval (chegara: 1px qattiq #ccc; eni: 100% ; chekka: 0; to‘ldirish: 0; chegarani yig‘ish: yig‘ish; chegara oralig‘i: 0; ) jadval tr (chegara: 1px qattiq #ddd; to‘ldirish: 5px; ) jadval th, jadval td ( to‘ldirish: 10px; matnni tekislash : markaz; hoshiya-o‘ng: 1px qattiq #ddd; ) jadval th (rang: #fff; fon rangi: #444; matnni o‘zgartirish: katta harf; shrift o‘lchami: 14px; harf oralig‘i: 1px; )

Bu oddiy jadvalga o'xshaydi, tabiiyki, saytni 320-420 pikselga siljitish orqali biz butun saytning gorizontal aylantirilishini ko'ramiz. Gap emas.

Uni qanday tuzatish kerak? uslublar qo'shing:

@media ekrani va (maksimal kenglik: 600px) (jadval (chegara: 0; ) jadval paneli (displey: yoʻq; ) jadval tr (pastki chet: 10px; displey: blok; chegara-pastki: 2px qattiq #ddd; ) jadval td (displey: blok; matnni tekislash: o‘ngga; shrift o‘lchami: 13px; hoshiya-pastki: 1px nuqtali #ccc; chegara-o‘ng: 1px qattiq shaffof; ) jadval td: oxirgi-child (chegara-pastki: 0; ) jadval td:oldin (kontent: attr(ma'lumotlar-yorlig'i); float: chap; matnni o'zgartirish: katta harf; shrift-og'irligi: qalin; ) )

Bu yerda biz jadval satrlarini bloksimon qildik, ustun nomlarini olib tashladik va ustunlar matnini o'ng tomonga tekislashtirdik. O'z navbatida, pseudo-klassdan oldin :dan foydalanib, biz chap chetiga o'z sana atributlarimizni biriktiramiz. Bu shunday chiqadi:

Mana yana bir qalam:

Ko'rib turganingizdek, biz jadval qatorlarini barcha ma'lumotlarni o'z ichiga olgan kichik blokga aylantirdik. O'ylaymanki, bu stol moslashuvi opsiyasi kichik jadvallar uchun mos keladi. Rohatlaning, do'stlar!

Windows: Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Agar HTML jadvalida juda ko'p ma'lumotlar mavjud bo'lsa, u sahifadagi mavjud bo'sh joydan kengroq bo'ladi va to'lib keta boshlaydi. Vaziyatni tuzatish uchun siz jadvalga gorizontal aylantirishni qo'shishingiz mumkin. Misol:

HTML/XHTML. Kod:

1

2

3

4

5

6

7

8

9

10

Jadval_ma'lumotlari_1

Jadval_ma'lumotlari_2

Jadval_ma'lumotlari_3

Jadval_ma'lumotlari_4

Jadval_ma'lumotlari_5

Jadval_ma'lumotlari_6

Jadval_ma'lumotlari_7

Jadval_ma'lumotlari_8

Jadval_ma'lumotlari_9

Jadval_ma'lumotlari_10

jadval (displey: blok; overflow-x: avtomatik;)

/* Qo'shimcha CSS, misolga biroz ko'rinish berish uchun: */

jadval (chegaraning qulashi: qulash;)

jadval td, th (to‘ldirish: 10px; chegara: 1px #000 qattiq;)

Eslatma: CSS xususiyatini ko'rsatish: bloki jadvalni vizual buzilishlarsiz ma'lumotlarni joylashtirish uchun kerak bo'lgan kenglikni egallaydi. Sahifada mavjud bo'sh joyning butun kengligi bo'ylab cho'zmasdan, endi yo'q. Kenglik: 100% CSS kodiga qo'shilgan bo'lsa ham. Misol:

Aliosque subditos va mavzu

CSS-dan foydalanib, mutlaqo joylashtirilgan elementni gorizontal ravishda markazlashtiring. Misol: HTML/XHTML. Kod: CSS. Kod: .misol (joylashuv: nisbiy; chap: 0px; tepa: 0px; balandlik: 90px; kenglik: 100%; float: chap; toʻldirish: 10px; chegara: 1px #ccc qattiq; fon: #fafafa; -moz-box -sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) .misol img (pozitsiya: mutlaq; chap: 0px; o'ng: 0px; margin: 0px auto; width: 68px;) Misolda, mutlaq joylashtirilgan img elementi markazlashtirilgan, lekin umuman olganda, gorizontal markazga moslashtirishning bu usuli boshqa inline va blok mutlaqo joylashtirilgan elementlar bilan ham ishlaydi. Mutlaq joylashtirilgan elementning kengligi foizda yoki boshqa o'lchov birliklarida ham bo'lishi mumkin. Ichkarida markazga tekislangan element joylashgan konteynerning CSS xususiyatlari (misol.misolda) juda boshqacha bo'lishi mumkin; markazga tekislash to'g'ridan-to'g'ri element bilan bog'liq uslublar yordamida yaratiladi: .example img (joylashuv: mutlaq; chap: 0px ; o'ng: 0px; chekka: 0px avtomatik;). [ 1 ] Shuningdek, Netscape 8.01+, Mozilla 1.5+ da. [ 2 ] Shuningdek, Netscape 8.01+, Mozilla 1.5+ da.

CSS-da "float: bottom" xususiyati yo'q, ammo ta'sirga boshqa usullar bilan erishish mumkin. Misol: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Havola 1 havola 2 havola 3 Float pastki HTML / XHTML. Kod: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in cididunt ut worke and dolor magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco workis nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Havola 1

Havola 2

Havola 3

Ma'lumotlar jadvallari sezgir dizaynni juda yaxshi ishlatmaydi. Afsuski, bu moment mavjud. Ta'sirchan dizayn - bu turli xil ekran o'lchamlarini moslashtirish uchun dizayningizni sozlashdir. Xo'sh, ekran minimal ma'lumotlar jadvali kengligidan torroq bo'lsa nima bo'ladi? Siz kattalashtirishingiz va butun jadvalni ko'rishingiz mumkin, lekin matn hajmi o'qish uchun juda kichik bo'ladi. Yoki siz o'qish nuqtasini kattalashtirishingiz mumkin, lekin jadvalni ko'rish uchun vertikal gorizontal va (afsuski) aylantirishingiz kerak bo'ladi. Ma'lumotlar jadvallari juda keng bo'lishi mumkin va albatta. Jadvallar kengligi bo'yicha moslashuvchan bo'lishi mumkin (og'irligi = 100%), lekin hujayralar tarkibi shunchalik tor bo'lib qolishi mumkinki, ularni ko'rib bo'lmaydi.

Ushbu noxush daqiqani oldini olish uchun moslashuvchan jadvallar qo'llaniladi. Agar ekran to'liq tarkibni ko'rsatish uchun juda kichik bo'lsa, bunday jadval gorizontal aylantirish panelini ko'rsatadi.

Javob beruvchi jadval yaratish uchun konteyner elementini qo'shing overflow-x: avtomatik atrofida

Eslatma. OS X Lion’da (Mac’da) aylantirish panellari sukut bo‘yicha berkitiladi va faqat foydalanilganda paydo bo‘ladi (hatto “toshib ketish: aylantirish” yoki avtomatik rejimga o‘rnatilgan bo‘lsa ham).

Agar jadvallar turli xil ekran o'lchamlariga yaxshi moslasha olsa, insoniyat bugungi kungacha stol maketlarini yaratmoqda. Men hali ham o'sha vaqtni topdim va nima haqida gapirayotganimni bilaman.

Biroq, biz boshqa vaqtda yashayapmiz, stol tartibi unutilib ketdi, ammo veb-saytlarda klassik jadvallardan foydalanish zarurati hali ham saqlanib qolmoqda. Shuning uchun biz jadvallar mavjudligini inkor etmaymiz, aksincha, jadvalni moslashtirishning eng oddiy usuli haqida bilib olamiz.

Biz oddiy HTML jadvalini yaratdik, agar u ekranga mos kelsa, hammasi joyida. Ekranning kengligi kichraytirilganda, jadval kesiladi va biz uning ma'lumotlarini ko'rmaymiz yoki u juda kichik bo'lib qoladi va biz yana hech narsani ko'rmaymiz.

Jadvalni div yorlig'i ichiga qo'yganimni payqagan bo'lishingiz mumkin va buning sababi aniq. Div tegining o'zi biz uni uslublamaguncha hech narsa qilmaydi.

Faqat bitta xususiyatni o'rnatish orqali jadval moslashadi, div yorlig'i ichidagi kontent X o'qi bo'ylab joriy ekran kengligiga mos kelmasa, avtomatik ravishda gorizontal aylantirish paneli paydo bo'ladi.

Div(
overflow-x: avtomatik;
)

Jadval teglarining qolgan qismini uslublashtiramiz:

Jadval (
chegara-burilish: qulash; /* Faqat bitta qatorlarni ko'rsatish */
chegara oralig'i: 0; /* Hujayralar orasidagi masofa */
kengligi: 100%;
chegara: 1px qattiq #afb42b;
rang: #212121;
}

Th, td (
matnni tekislash: chapga;
to'ldirish: 8px;
}

tr (qator) tegining uslubi alohida izohga loyiqdir. Stol qatorlari chiziqli ko'rinishga ega bo'lishi allaqachon normaga aylangan (zebra). Buning uchun psevdo-sinfdan foydalaning :nth-child qavs ichidagi qiymat bilan. Juft qiymat barcha juft elementlarga xossalarni belgilaydi, bizning holatlarimizda fon rangi. Shunday qilib, stol chiziqli bo'ladi.