:
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).
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:
Telefon modeli Narx RAM, GB Diagonal, dyuym PPI Batareya, mAh
| OnePlus One |
100 500 rubl |
3 |
5.5 |
401 |
3100 |
| OnePlus Ikki |
100 500 rubl |
4 |
5.5 |
401 |
3300 |
| OnePlus X |
100 500 rubl |
3 |
5 |
441 |
2525 |
Javob beruvchi jadvalni joylashtirishning yuklash usuli 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: jadval div bilan o'ralgan bo'lib, u maksimal eni 100% ga o'rnatiladi va to'ldiriladi: 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.
Haqiqiy moslashuvchan jadvalning tartibi 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), shuningdek 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 ko'rsatamiz.
Telefon modeli Narxi RAM, GB diagonali, dyuymli PPI batareyasi, mAh ...
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"
| OnePlus One |
100 500 rubl |
3 |
5.5 |
401 |
3100 |
...
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.
Birinchi moslashish usuli | | Xizmat tavsifi Narx chegirma Mobil sxemasi Telefonlar uchun $3000 50% CMS WordPress qo'nish $3000 30% |
Xizmat tavsifi Narxda chegirma
| Mobil tartib |
Telefonlar uchun tartib |
$3000 |
50% |
| CMS WordPress-ga kirish |
Admin bilan veb-sayt yaratish. paneli |
$3000 |
30% |
Keling, hamma narsani uslublashtiramiz (asosan, biz stol o'ramini bezashimiz kerak).
| 1
2
3
4
5
6
7
8
9
10
11
12
13
| .jadvalni o‘rash (matnni tekislash: markaz; displey: inline-blok; fon rangi: #fff; to‘ldirish: 2rem 2rem; rang: #000; ) .table-wrap (to‘ldirish-y: aylantirish; )) |
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.
Ikkinchi moslashish usuli Birinchidan, belgini o'zgartiramiz:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
Xizmat tavsifi Narxda chegirma
| Mobil tartib |
Telefonlar uchun tartib |
$3000 |
50%
|
| CMS WordPress-ga kirish |
Admin bilan veb-sayt yaratish. paneli |
$3000 |
30%
|
|
Xizmat tavsifi Narxda chegirma
| Mobil tartib |
Telefonlar uchun tartib |
$3000 |
50% |
| CMS WordPress-ga kirish |
Admin bilan veb-sayt yaratish. paneli |
$3000 |
30% |
Biz har bir ustunga ma'lumotlar yorlig'i atributini berdik, bu kelajakda biz uchun foydali bo'ladi.
Asosiy uslublarni o'rnating:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| tana (matnni tekislash: markaz; to‘ldirish tepasi: 10%; font-family: sans-serif; fon tasviri: url (“bg.jpg"); fon o‘lchami: qopqoq; balandlik: 100vh; rang: #fff ; ) .jadvalni o‘rash (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;) |
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:
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| @media ekrani va (maksimal kenglik: 600px) (jadval (chegara: 0; ) stol boshi (displey: yoʻq; ) jadval tr (chekka-pastki: 10px; displey: blok; chegara-pastki: 2px qattiq #ddd ;) jadval td (displey : blok ; matnni tekislash : o‘ng ; shrift o‘lchami : 13px ; chegara-pastki : 1px nuqtali #ccc ; chegara o‘ng : 1px qattiq shaffof ; ) jadval td: oxirgi bola (chegara-pastki: 0 ; ) jadval td:oldin (kontent : attr(ma'lumotlar yorlig'i) ; float : chap ; matnni o'zgartirish : katta harf ; shrift og'irligi : qalin ; ) ) |
@media ekrani va (maksimal kenglik: 600px) (jadval (chegara: 0; ) jadval paneli (displey: yoʻq; ) jadval tr (pastki chekka: 10px; displey: blok; chegara-pastki: 2px qattiq #ddd; ) table td (displey: blok; matnni tekislash: o‘ng; 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!
Kichkina ekranda katta hajmli ma'lumotlarni ko'rsatish har doim boshqotirma. Uni qanday yo'llar bilan hal qila olasiz va mobil telefonda qulay stol qanday bo'lishi kerak?
Shuni ta'kidlash kerakki, jadvallar ko'pincha nafaqat mobil qurilmalarda, balki ekrandan tashqariga chiqadi: shunday bo'ladiki, ular ulkan monitorga yoki hatto bir nechta satrlarga mos keladiganidan ko'ra ko'proq ustunlar yoki qatorlarni o'z ichiga oladi. Biroq, ekran qanchalik kichik bo'lsa, foydalanish qulayligi bilan bog'liq muammolar paydo bo'lishi ehtimoli shunchalik yuqori.
Jadval ko'rinishidagi asosiy elementlar tarkibning uyg'unligi va mazmunli atributlaridir. Har ikkisi ham mobil stollar uchun ayniqsa muhimdir. Avval siz katta monitorlar uchun qulay jadval yaratishingiz kerak, keyin esa kichik ekranlar uchun versiyani yaratishingiz kerak. Bunday ehtiyoj sizning jadvalingiz tarkibini yaxshilash va barcha foydalanuvchilar uchun qulayroq qilish uchun ajoyib sabab bo'lishi mumkin.
Mobil ekranda ko'rsatiladigan jadval ustunlari soni ularning kengligiga bog'liq va ularning mazmuni masshtabdan foydalanishga hojat qoldirmasdan aniq bo'lishi kerak.
Murakkab yoki uzun matnlar uchun, masalan, taqqoslash jadvallarida, tor mobil ekranga faqat 2 ta ustun mos keladi. Va agar jadval asosan raqamlar bilan to'ldirilgan bo'lsa, ustunlar torroq bo'lishi mumkin va shuning uchun ko'proq mos keladi.
Milliy regbi ligasi statistikasi raqamlardan iborat, shuning uchun 11 ta ustun gorizontal aylantirishni talab qilmasdan mobil ekranga qulay tarzda joylashadi. E'tibor bering, bu natijaga faqat birinchi ustundagi raqib jamoa logotipi va bilmaganlar uchun tushunarsiz bo'lgan qisqartmalardan foydalanish orqali erishiladi. Biroq o'yinchilar haqidagi bunday batafsil statistik ma'lumotlar faqat regbi muxlislarini qiziqtiradi.
Telefonni aylantirish oxirgi chora hisoblanadi Agar siz telefoningizni gorizontal ravishda aylantirsangiz, ekranda ko'proq ustunlar joylashadi. Biroq, shu bilan birga, chiziqlar soni kamayadi va foydalanuvchilar smartfonni aylantirishni zerikarli deb bilishlari mumkin (ayniqsa, agar u aylanish qulfiga ega bo'lsa). Jadvalning katta kengligi bu kamchiliklarni oqlaydimi, diqqat bilan o'ylab ko'ring.
Citi veb-saytida kredit kartalarni solishtirish uchun foydalanuvchilar ko'rsatmalarga amal qilishlari kerak: "Kredit kartalarini taqqoslashni davom ettirish uchun telefoningizni gorizontal ravishda aylantiring." Shu bilan birga, aylanayotganda, ekranning katta qismini kredit kartalarining ulkan tasvirlari egallaydi, ular aylanayotganda joyida o'rnatiladi va jadval tarkibi uchun juda kam joy qoldiradi. Bu ko'plab mobil saytlarning xatosi: agar ish stolida tasvirlar ustun uchun yaxshi sarlavha bo'lishi mumkin bo'lsa, unda mobil telefonda ular kerak.
Bir nechta vertikal ekranni o'z ichiga olgan har qanday jadvalda yopishqoq ustun sarlavhalari foydalanuvchiga kontekst haqida chalkashmaslikka yordam beradi.
Chapdagi Best.Buy bilan taqqoslash jadvalida na ustunlar, na ularning sarlavhalari yozilmaydi va ma'lumotlarni o'qish qiyin. O'ng tomonda ushbu jadval aylantirilganda qanday ko'rinishga ega, hech qanday tushuntirishsiz.
Mobil qurilmalarda ham, ish stolida ham umuman istalmagan bo'lsa-da, mobil qurilmalardagi katta jadvallar uchun nisbatan maqbuldir. Ma'lumotlar ekranga mos kelmasa, tashrif buyuruvchilar undan foydalanishlari mumkin. Biroq, bu holda zarur: bu barcha mavjud ma'lumotlar emasligi aniq bo'lishi kerak. Slayderlarda bo'lgani kabi, o'qlar va kesilgan elementlar bu ma'lumotni eng aniq tarzda etkazadi. Nuqtalar ba'zan ishlatiladi, lekin ularni sezish va tushunish odatda qiyinroq.
eBag veb-saytida mahsulotlarning oxirgi ustuni kesilgan, shuning uchun foydalanuvchilar gorizontal aylantirish mavjudligini tushunishadi.
Subaru veb-sayti foydalanuvchilarga ko'proq kontent ekranlari mavjudligini ko'rsatish uchun jadval ustidagi nuqta va o'qlardan foydalanadi. Nuqtalar biroz chalkashliklarni keltirib chiqaradi, chunki ulardan ikkitasi "joriy joylashuvni" (ya'ni hozirda ko'rinadigan ikkita ustun) ko'rsatish uchun ta'kidlangan. Bunga qo'shimcha ravishda, o'qlarni stol ustida emas, balki to'g'ri joylashtirish yaxshiroqdir.
Agar foydalanuvchilar gorizontal aylantirishga murojaat qilishlari kerak bo'lsa, odatda satr sarlavhalarini o'z ichiga olgan eng chap ustun muzlatib qo'yilishi kerak, shunda foydalanuvchilar har doim satr sarlavhalarini ko'rishadi.
Fidelity ilova nomlari va ustun sarlavhalarini tuzatdi. Foydalanuvchilarga gorizontal aylantirish mavjudligini tushunishga yordam berish uchun o'ngdagi oxirgi ustun kesiladi.
Officeworks.com.au birinchi mahsulot ustunini tuzatdi, shunda foydalanuvchilar boshqa barcha variantlarni unga nisbatan solishtirishlari mumkin. Birinchi ustundagi mahsulot taqqoslash uchun mos yozuvlar nuqtasi bo'lib xizmat qiladi va foydalanuvchilar uni boshqa narsa bilan almashtirishlari mumkin. To'g'ridan-to'g'ri jadvalga joylashtirilgan o'qlar ma'lumotlarni chapga va o'ngga aylantirish mumkinligini aniq ko'rsatadi.
Agar ma'lumotlar ekranga to'g'ri kelmasa, foydalanuvchilarning uni to'liq o'rganishga vaqti yoki moyilligi bo'lmasligi mumkin. Demak, savol ularga faqat kerakli ma'lumotlarni qanday taqdim etishda. Bu savolga javob vazifa va ma'lumotlar turiga bog'liq. Turli vaziyatlarda ma'lumotlar miqdorini cheklash uchun ikkita strategiya mavjud:
- Foydalanuvchi o'zi qiziqqan ma'lumotlarni ko'rishdan oldin tanlaydi.
- Foydalanuvchi uni ko'rish vaqtida o'zini qiziqtirgan ma'lumotlarni tanlaydi.
Birinchi yondashuv foydalanuvchi ma'lumotlarni ko'rishi kerak bo'lganda ishlaydi, lekin uni solishtirmaydi va u faqat ma'lumotlar yuklanishidan oldin o'ziga kerak bo'lgan narsani tanlaydi. Misol uchun, u faqat ma'lum bir mashinaning xususiyatlari, ma'lum bir taomning ozuqaviy xususiyatlari yoki ma'lum bir o'yinchining statistikasi bilan qiziqishi mumkin va foydalanuvchi ularni boshqa variantlar bilan taqqoslamaydi.
Jamba Juice uchun ozuqaviy ma'lumotlarni ko'rish uchun tashrif buyuruvchilar u haqidagi ma'lumotni ko'rish uchun o'zlari qiziqqan ichimlikni tanlashlari kerak. Kichik/O'rta/Katta kalit kerakli variantni tanlash imkonini beradi, lekin ularni solishtirishga imkon bermaydi. Masalan, kichik va o'rta stakan o'rtasidagi kaloriyalar farqini tushunish uchun foydalanuvchi avval kichik stakan uchun kaloriyalar sonini eslab qolishi, so'ngra o'rtasiga o'tishi, uning kaloriyalar sonini izlashi va bittasini ayirishi kerak. boshqa o'zlaridan - ko'p odamlar qilish uchun juda dangasa aqliy ish ko'p.
Ikkinchi strategiya - foydalanuvchiga ma'lumotlarni ko'rib chiqishda ko'rib chiqishni nazorat qilish. Misol uchun, bir foydalanuvchi ikki variant o'rtasidagi o'xshashlik yoki farqni ko'rishni istasa, boshqasi yuk tashish hajmi yoki xavfsizlik xususiyatlari kabi mahsulotlarning o'ziga xos xususiyatlarini bilishni xohlaydi, lekin ikkita avtomobil o'rtasidagi shovqin darajasidagi farq bilan qiziqmaydi. Ko'rsatish uchun satr va ustunlarni tanlash qobiliyati foydalanuvchilarga o'zlari uchun muhim bo'lgan xususiyatlarga e'tibor qaratish imkonini beradi.
Dell veb-saytida foydalanuvchilar sahifaning yuqori qismidagi menyudan o'zlarini qiziqtirgan mahsulot spetsifikatsiyalarini tanlaydilar. Chapda: Odatiy bo'lib, barcha xususiyatlar ko'rsatiladi. Markazda: foydalanuvchi o'ziga kerak bo'lganlarini tanlaydi. O'ng: Faqat u tanlagan narsa ko'rsatiladi.
Agar jadvalda toifalar bo'yicha guruhlanishi mumkin bo'lgan ma'lumotlar mavjud bo'lsa, buni bajaring va mobil foydalanuvchilarga:
- jadvalda mavjud bo'lgan ma'lumotlar turlari haqida umumiy tushunchaga ega bo'lish;
- qiziqtirgan ma'lumotlarga to'g'ridan-to'g'ri kirish.
Samsung.com saytida taqqoslash jadvallari barcha texnik xususiyatlarni yoki faqat mahsulotlar o'rtasidagi o'xshashliklarni yoki faqat farqlarni yoki foydalanuvchi tanlaydigan mezonlarni ko'rsatishi mumkin. Sayt o'xshash atributlarga ega ma'lumotlarni guruhlarga ajratadi, bu sizga qiziqish ma'lumotlar to'plamini tanlash imkonini beradi. Shu bilan birga, ma'lumotlar guruhlari foydalanuvchilarga qanday mahsulot ma'lumotlari mavjudligini aytib, sahifa mazmuni haqida umumiy ma'lumot beradi.
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.
Javob beruvchi jadvalni namoyish qilish. HTML belgilash
Ism
Familiya
Ballar
Ballar
Ballar
Ballar
Ballar
Ballar
Ballar
Ballar
Ballar
Ballar
|
Yuliya |
Smirnova |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
50 |
Evelin |
Yakovleva |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
94 |
Andrey |
Petrov |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
67 |
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.
CSS uslublari 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.
