Aspro-ში: შემდეგი, 1.1.7 ვერსიიდან დაწყებული, შეგიძლიათ ცხრილების ადაპტირება მობილური ვერსიისთვის. აუცილებელია ცვლილებების შეტანა გვერდის საწყის კოდში - დაამატეთ კლასი, რომელიც პასუხისმგებელია ცხრილების ადაპტირებაზე.
მობილური ვერსიის მარტივი ცხრილი სცილდება გვერდს.
იმისთვის, რომ ცხრილი საპასუხო იყოს, გადადით გვერდის რედაქტირებაზე, სადაც ცხრილი დაემატა. შემდეგ გადადით კოდის რედაქტირების რეჟიმში.
გახსნის ტეგამდე
შეინახეთ ცვლილებები.
ახლა მაგიდა გადახვევა და არ სცილდება ჩარჩოს.
ჰორიზონტალურად გადახვევისას ცხრილი ჩარჩოს არ სცილდება, მაგრამ მობილური ვერსიაში მარჯვნივ გადახვევისას იხსნება გვერდითი მენიუ. იმის უზრუნველსაყოფად, რომ მენიუ ხელს არ შეუშლის მაგიდასთან მუშაობას, თქვენ უნდა შეიტანოთ ცვლილებები გვერდის კოდში.
თქვენ უნდა დაამატოთ "swipeignore" კლასი ტეგში
შეინახეთ ცვლილებები.
ახლა, ცხრილის მარჯვნივ გადახვევისას, გვერდითი მენიუ არ იხსნება, რაც ხელს უშლის მაგიდასთან მუშაობას.
თქვენ შეგიძლიათ დამალოთ გვერდითი მენიუ მარჯვნივ და სხვა გვერდებზე გადახვევისას. თქვენ უნდა დაამატოთ "swipeignore" კლასი ტეგში
მონაცემთა ცხრილები კარგად არ უმკლავდება საპასუხო დიზაინს. სამწუხაროდ, ეს მომენტი არსებობს. საპასუხო დიზაინი მიზნად ისახავს თქვენი დიზაინის მორგებას, რათა მოერგოს სხვადასხვა ეკრანის ზომას. რა მოხდება, როდესაც ეკრანი ვიწროა მონაცემთა ცხრილის მინიმალურ სიგანეზე? შეგიძლიათ დააპატარავოთ და ნახოთ მთელი ცხრილი, მაგრამ ტექსტის ზომა ძალიან მცირე იქნება წასაკითხად. ან შეგიძლიათ გაადიდოთ კითხვის წერტილი, მაგრამ თქვენ დაგჭირდებათ ვერტიკალურად ჰორიზონტალურად გადახვევა და (სამწუხაროდ) ცხრილის სანახავად. მონაცემთა ცხრილები შეიძლება იყოს საკმაოდ ფართო და რა თქმა უნდა. ცხრილები შეიძლება იყოს მოქნილი სიგანეში (წონა=100%), მაგრამ უჯრედების შიგთავსი შეიძლება ისეთი ვიწრო გახდეს, რომ უბრალოდ არ ჩანს.
ამ უსიამოვნო მომენტის თავიდან ასაცილებლად გამოიყენება ადაპტაციური ცხრილები. ასეთი ცხრილი აჩვენებს ჰორიზონტალურ გადახვევის ზოლს, თუ ეკრანი ძალიან პატარაა სრული შინაარსის საჩვენებლად.
საპასუხო ცხრილის შესაქმნელად, დაამატეთ კონტეინერის ელემენტი overflow-x:ავტოირგვლივ Შენიშვნა. OS X Lion-ში (Mac-ზე), გადახვევის ზოლები ნაგულისხმევად იმალება და ჩნდება მხოლოდ გამოყენებისას (მაშინაც კი, თუ დაყენებულია "გადასვლა: გადახვევა" ან ავტომატური). არცერთი განლაგების დიზაინერისთვის არ არის საიდუმლო, რომ მაგიდები ბოროტია. მათი ადაპტაცია და მორგება რთულია. თუ საიტის დესკტოპის ვერსიაზე ჯერ კიდევ საკმაოდ მარტივია ცხრილის შექმნა, მაშინ როდესაც ადაპტური განლაგება იწყება, ყველაფერი ჯოჯოხეთში მიდის. სინამდვილეში, ერთ-ერთი ეფექტური ვარიანტია მაგიდისთვის ჰორიზონტალური გადახვევის შექმნა. ეს არ არის რთული გასაკეთებელი, მაგრამ ეს არ არის ის, რასაც დღევანდელი პოსტი ეხება. თუმცა მე გაჩვენებთ. მოდი მთლიანი სტილი გავაფორმოთ (ძირითადად ჩვენ გვჭირდება სტილი მაგიდა-შეფუთვა). ცხრილის შეფუთვა (ტექსტის გასწორება: ცენტრში; ეკრანი: inline-block; ფონის ფერი: #fff; padding: 2rem 2rem; ფერი: #000; ) @media ეკრანი და (მაქს. სიგანე: 600px) ( .table-wrap ( overflow-y: გადახვევა; ) ) შედეგად, 600 პიქსელამდე სიგანეზე, ცხრილი გადახვევს, მაგრამ საიტი არა. მოსახერხებელია, მაგრამ დღეს სხვა რამეზე მინდა ვისაუბრო. პირველი, მოდით შევცვალოთ მარკირება: თითოეულ სვეტს მიანიჭა ატრიბუტი მონაცემთა ეტიკეტი, რომელიც მომავალში გამოგვადგება. დააყენეთ ძირითადი სტილები: ტექსტი (ტექსტის გასწორება: ცენტრში; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); ფონის ზომა: საფარი; სიმაღლე: 100vh; ფერი: #fff ;) .table-wrap (ტექსტის გასწორება: ცენტრში; ჩვენება: inline-block; ფონის ფერი: #fff; padding: 2rem 2rem; ფერი: #000; ) მაგიდა (საზღვარი: 1px მყარი #cccc; სიგანე: 100% ბალიშები:0 ბალიშები: საზღვრები tr (საზღვრები: 1px მყარი #ddd; padding: 5px; padding: 10px; საზღვარი-მარჯვნივ: 1px მყარი #ddd ) ცხრილი th (ფერი: #fff; ფონის ფერი: #444; ტექსტის ტრანსფორმაცია: დიდი; შრიფტის ზომა: 14 პიქსელი; ასოების ინტერვალი: 1px; ) ჩვეულებრივ ცხრილს ჰგავს, ბუნებრივია, საიტის 320-420 პიქსელით გადაადგილებით დავინახავთ მთელი საიტის ჰორიზონტალურ გადახვევას. არ არის წერტილი. როგორ გავასწორო? სტილის დამატება: @media ეკრანი და (მაქსიმალური სიგანე: 600 პიქსელი) ( ცხრილი ( საზღვარი: 0; ) ცხრილი (ჩვენება: არცერთი; ) ცხრილი tr ( ზღვარი-ქვედა: 10 პიქსელი; ეკრანი: ბლოკი; საზღვრის ქვედა: 2 პიქსელი მყარი #ddd; ) ცხრილი td ( ჩვენება: ბლოკი; ტექსტის გასწორება: მარჯვნივ; შრიფტის ზომა: 13 პიქსელი; საზღვრის ქვედა ნაწილი: 1 პიქსელი წერტილით #cccc; კონტური მარჯვნივ: 1 პიქსელი მყარი გამჭვირვალე; ) ცხრილი td:ბოლო-შვილი (ბოლო-ქვედა: 0; ) ცხრილი td: ადრე ( შინაარსი: attr (მონაცემთა-ეტიკეტები); float: მარცხენა; ტექსტის ტრანსფორმაცია: დიდი; შრიფტის წონა: თამამი; ) ) აქ ცხრილის რიგები გავხადეთ ბლოკის მსგავსი, წავშალეთ სვეტების სახელები და თავად სვეტების ტექსტი გავასწორეთ მარჯვნივ. თავის მხრივ, ფსევდოკლასის გამოყენებით : ადრეჩვენ ვამატებთ თარიღის ატრიბუტებს მარცხენა მინდვრზე. გამოდის ასე: აი კიდევ ერთი კალამი: როგორც ხედავთ, ცხრილის რიგები გადავაქციეთ პატარა ბლოკად, რომელიც შეიცავს ყველა ინფორმაციას. ვფიქრობ, მაგიდის ადაპტაციის ეს ვარიანტი შესაფერისია პატარა მაგიდებისთვის. ისიამოვნეთ, მეგობრებო! ფანჯრები: 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]. თუ HTML ცხრილი შეიცავს ძალიან ბევრ მონაცემს, ის უფრო ფართო ხდება, ვიდრე ხელმისაწვდომ სივრცეში გვერდზე და იწყებს ზედმეტობას. სიტუაციის გამოსასწორებლად, შეგიძლიათ დაამატოთ ჰორიზონტალური გადახვევა მაგიდაზე. მაგალითი: HTML/XHTML. კოდი: <მაგიდა> <ტრ> <ე>1</თ> <ე>2</თ> <ე>3</თ> <ე>4</თ> <ე>5</თ> <ე>6</თ> <ე>7</თ> <ე>8</თ> <ე>9</თ> <ე>10</თ> </ტრ> <ტრ> <ტდ>ცხრილის_მონაცემები_1</ტდ> <ტდ>ცხრილის_მონაცემები_2</ტდ> <ტდ>ცხრილის_მონაცემები_3</ტდ> <ტდ>ცხრილის_მონაცემები_4</ტდ> <ტდ>ცხრილის_მონაცემები_5</ტდ> <ტდ>ცხრილის_მონაცემები_6</ტდ> <ტდ>ცხრილის_მონაცემები_7</ტდ> <ტდ>ცხრილის_მონაცემები_8</ტდ> <ტდ>ცხრილის_მონაცემები_9</ტდ> <ტდ>ცხრილის_მონაცემები_10</ტდ> </ტრ> </
მაგიდა> მაგიდა(ჩვენება: ბლოკი; გადინება-x: ავტომატური;) /* დამატებითი CSS, უბრალოდ მაგალითის გარეგნობის მისაცემად: */ მაგიდა(საზღვრის კოლაფსი: კოლაფსი;) მაგიდა td,th(შეფუთვა: 10 პიქსელი; კონტური: 1პx #000 მყარი;) შენიშვნა: CSS თვისება ჩვენება: ბლოკიხდის მას ისე, რომ ცხრილი იკავებს მხოლოდ იმდენ სიგანეს, რამდენიც მას სჭირდება მონაცემების შესანახად ვიზუალური დამახინჯების გარეშე. მეტი, გვერდზე არსებული სივრცის მთელ სიგანეზე გაჭიმვის გარეშე. მაშინაც კი, თუ CSS კოდი დაემატება სიგანე: 100%. მაგალითი: სხვა სუბტიტრები და თემა ბევრი ონლაინ სერვისი არსებობს sitemap.xml-ის შესაქმნელად. თუმცა, ამის გაკეთება შეგიძლიათ საკუთარ კომპიუტერზე, lynx ბრაუზერის და Linux-ის რამდენიმე ბრძანების ხაზის გამოყენებით. ქვემოთ მოცემულია bash სკრიპტის მაგალითი სახელწოდებით "sitemap.sh", რომელიც იყენებს მათ. Bash სკრიპტი, რომელიც ქმნის sitemap.xml ფაილს: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat კატა /home/me/sitemap/www/traverse.dat | sed -e "s/\ CSS-ში არ არის "float: bottom" თვისება, მაგრამ ეფექტის მიღწევა შესაძლებელია რამდენიმე სხვა გზით. მაგალითი: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 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, გვხვდება culpa qui officia deserunt mollit anim id est laborum. ბმული 1 ბმული 2 ბმული 3 მოძრავი ქვედა HTML / XHTML. კოდი: მცირე ეკრანზე მოცულობითი მონაცემების ჩვენება ყოველთვის თავსატეხია. რა გზებით შეგიძლიათ მისი გადაჭრა და როგორი უნდა იყოს მოსახერხებელი მაგიდა მობილურ ტელეფონზე? აღსანიშნავია, რომ ცხრილები ხშირად სცილდება ეკრანს, არა მხოლოდ მობილურ მოწყობილობებზე: ხდება, რომ ისინი შეიცავს უფრო მეტ სვეტს ან მწკრივს, ვიდრე ჯდება უზარმაზარ მონიტორზე ან თუნდაც რამდენიმეზე. თუმცა, რაც უფრო პატარაა ეკრანი, მით უფრო სავარაუდოა, რომ გამოყენებადობის პრობლემები წარმოიქმნება. ცხრილის ხედის ძირითადი ელემენტებია შინაარსის თანმიმდევრულობა და მნიშვნელოვანი ატრიბუტები. ორივე განსაკუთრებით მნიშვნელოვანია მობილური მაგიდებისთვის. ჯერ უნდა შექმნათ მოსახერხებელი ცხრილი დიდი მონიტორებისთვის, შემდეგ კი ვერსია პატარა ეკრანებისთვის. ასეთი საჭიროება შეიძლება იყოს შესანიშნავი მიზეზი თქვენი ცხრილის შინაარსის დახვეწისა და ყველა მომხმარებლისთვის უფრო მოსახერხებელი გახადისთვის. ცხრილის სვეტების რაოდენობა, რომლებიც უნდა გამოჩნდეს მობილური ეკრანზე, დამოკიდებულია მათ სიგანეზე და მათი შინაარსი უნდა იყოს მკაფიო გადიდების საჭიროების გარეშე. რთული ან გრძელი ტექსტებისთვის, მაგალითად, შედარების ცხრილებში, მხოლოდ 2 სვეტი ჯდება ვიწრო მობილური ეკრანზე. და თუ ცხრილი ივსება ძირითადად რიცხვებით, სვეტები შეიძლება უფრო ვიწრო იყოს და, შესაბამისად, მოერგოს. რაგბის ეროვნული ლიგის სტატისტიკა შედგება რიცხვებისგან, ამიტომ 11 სვეტი კომფორტულად ჯდება მობილური ეკრანზე ჰორიზონტალური გადახვევის საჭიროების გარეშე. გთხოვთ გაითვალისწინოთ, რომ ეს შედეგი მიიღწევა მხოლოდ მოწინააღმდეგე გუნდის ლოგოს პირველ სვეტში და აბრევიატურების გამოყენებით, რომლებიც შეიძლება გაუგებარი იყოს. თუმცა ფეხბურთელების ასეთი დეტალური სტატისტიკა მხოლოდ რაგბის მოყვარულებს აინტერესებს. თუ ტელეფონს ჰორიზონტალურად ატრიალებთ, ეკრანზე მეტი სვეტი მოერგება. თუმცა, ამავდროულად, ხაზების რაოდენობა მცირდება და მომხმარებლებს შესაძლოა აწუხებდეს სმარტფონის როტაცია (განსაკუთრებით თუ მას აქვს ბრუნვის საკეტი). კარგად დაფიქრდით, ამართლებს თუ არა მაგიდის დიდი სიგანე ამ ნაკლოვანებებს. Citi-ს ვებსაიტზე საკრედიტო ბარათების შესადარებლად, მომხმარებლებმა უნდა მიჰყვეს ინსტრუქციას: „მოატრიალეთ ტელეფონი ჰორიზონტალურად, რათა გააგრძელოთ საკრედიტო ბარათების შედარება“. ამავდროულად, ბრუნვისას, ეკრანის უმეტესი ნაწილი უკავია საკრედიტო ბარათების უზარმაზარ გამოსახულებებს, რომლებიც ფიქსირდება გადაადგილებისას, რაც ძალიან მცირე ადგილს ტოვებს თავად ცხრილის შინაარსისთვის. ეს ბევრი მობილური საიტის შეცდომაა: თუ დესკტოპზე სურათები შეიძლება იყოს კარგი სათაური სვეტისთვის, მაშინ მობილურზე ისინი საჭიროა. ნებისმიერ ცხრილში, რომელიც მოიცავს ერთზე მეტ ვერტიკალურ ეკრანს, სვეტების წებოვანი სათაურები ეხმარება მომხმარებელს თავიდან აიცილოს დაბნეულობა კონტექსტში. მარცხნივ Best.Buy-თან შედარების ცხრილში არც სვეტებია ჩაწერილი და არც მათი სათაურები და მონაცემები ძნელად იკითხება. მარჯვნივ არის ის, თუ როგორ გამოიყურება ეს ცხრილი გადახვევისას, ყოველგვარი ხილული ახსნის გარეშე. მიუხედავად იმისა, რომ ზოგადად არასასურველია როგორც მობილურზე, ასევე დესკტოპზე, ის შედარებით მისაღებია მობილური მოწყობილობების დიდი მაგიდებისთვის. როდესაც მონაცემები არ ჯდება ეკრანზე, ვიზიტორებს შეიძლება მოუწიონ მისი გამოყენება. თუმცა, ამ შემთხვევაში აუცილებელია: აშკარა უნდა იყოს, რომ ეს არ არის ყველა არსებული მონაცემი. როგორც სლაიდერები, ისრები და ამოჭრილი ელემენტები ამ ინფორმაციას ყველაზე ნათლად გადმოსცემს. წერტილები ზოგჯერ გამოიყენება, მაგრამ, როგორც წესი, უფრო რთულია მათი შემჩნევა და გაგება. eBag-ის ვებსაიტზე პროდუქტების ბოლო სვეტი მოწყვეტილია, ასე რომ მომხმარებლებს ესმით, რომ შესაძლებელია ჰორიზონტალური გადახვევა. Subaru-ს ვებსაიტი იყენებს წერტილებსა და ისრებს მაგიდის ზემოთ, რათა აჩვენოს მომხმარებლებს, რომ ხელმისაწვდომია კონტენტის მეტი ეკრანი. წერტილები ქმნის გარკვეულ დაბნეულობას, რადგან ორი მათგანი მონიშნულია „მიმდინარე მდებარეობის“ საჩვენებლად (ანუ ამჟამად ხილული ორი სვეტი). გარდა ამისა, უმჯობესია ისრები მოათავსოთ არა მაგიდის ზემოთ, არამედ პირდაპირ მასში. თუ მომხმარებლებმა უნდა მიმართონ ჰორიზონტალურ გადახვევას, მარცხენა სვეტი, რომელიც ჩვეულებრივ შეიცავს მწკრივების სათაურებს, უნდა გაიყინოს ისე, რომ მომხმარებლებმა ყოველთვის დაინახონ მწკრივის სათაურები. Fidelity-მ დააფიქსირა დანართის სახელები და სვეტების სათაურები. ბოლო სვეტი მარჯვნივ არის ამოჭრილი, რათა მომხმარებლებს დაეხმარონ გაიგონ, რომ ჰორიზონტალური გადახვევა შესაძლებელია. Officeworks.com.au-მ დააფიქსირა პროდუქტის პირველი სვეტი, რათა მომხმარებლებს შეეძლოთ შეადარონ ყველა სხვა ვარიანტი მის წინააღმდეგ. პირველ სვეტში მოცემული პროდუქტი ემსახურება როგორც საცნობარო პუნქტს შედარებისთვის და მომხმარებლებს შეუძლიათ შეცვალონ იგი სხვა რამით. პირდაპირ ცხრილში განთავსებული ისრები ცხადყოფს, რომ მონაცემების გადახვევა შესაძლებელია მარცხნივ და მარჯვნივ. თუ მონაცემები არ ჯდება ეკრანზე, მომხმარებლებს ალბათ არ ექნებათ დრო ან მიდრეკილება, რომ სრულად გამოიკვლიონ ისინი. ასე რომ, საკითხავია, როგორ მივაწოდოთ მათ მხოლოდ მათთვის საჭირო ინფორმაცია. ამ კითხვაზე პასუხი დამოკიდებულია დავალებაზე და მონაცემთა ტიპზე. აქ მოცემულია ორი სტრატეგია მონაცემთა რაოდენობის შეზღუდვისთვის სხვადასხვა სიტუაციებში: პირველი მიდგომა მუშაობს მაშინ, როდესაც მომხმარებელს სჭირდება მონაცემების ნახვა, მაგრამ არა შედარება და ის ირჩევს მხოლოდ იმას, რაც სჭირდება მონაცემთა ჩატვირთვამდე. მაგალითად, ის შეიძლება დაინტერესდეს მხოლოდ კონკრეტული მანქანის მახასიათებლებით, კონკრეტული კერძის კვების თვისებებით ან ერთი კონკრეტული მოთამაშის სტატისტიკით და მომხმარებელი არ ადარებს მათ სხვა ვარიანტებს. ჯამბას წვენის კვების შესახებ ინფორმაციის სანახავად ვიზიტორებმა უნდა აირჩიონ მათთვის საინტერესო სასმელი, რომ ნახოთ ინფორმაცია მის შესახებ. Small/Medium/Large გადამრთველი გაძლევთ საშუალებას აირჩიოთ სასურველი ვარიანტი, მაგრამ არ გაძლევთ მათი შედარების საშუალებას. მაგალითად, მცირე და საშუალო ჭიქას შორის კალორიების სხვაობის გასაგებად, მომხმარებელმა ჯერ უნდა დაიმახსოვროს პატარა ჭიქის კალორიების რაოდენობა, შემდეგ გადართოს საშუალოზე, მოძებნოს მისთვის კალორიების რაოდენობა და გამოაკლოს ერთი. თავად მეორისგან - ბევრი გონებრივი სამუშაო, რომლის გაკეთებაც ადამიანების უმეტესობას ძალიან ეზარება. მეორე სტრატეგია არის მომხმარებლისთვის მიმოხილვის კონტროლი მონაცემთა დათვალიერებისას. მაგალითად, ერთ მომხმარებელს სურს დაინახოს მსგავსება ან განსხვავება ორ ვარიანტს შორის, ხოლო მეორეს სურს იცოდეს პროდუქტების სპეციფიკური მახასიათებლები, როგორიცაა საბარგულის ტევადობა ან უსაფრთხოების მახასიათებლები, მაგრამ არ აინტერესებს ხმაურის დონის განსხვავება ორ მანქანას შორის. საჩვენებლად სტრიქონებისა და სვეტების არჩევის შესაძლებლობა მომხმარებლებს საშუალებას აძლევს ფოკუსირება მოახდინონ მათთვის მნიშვნელოვან მახასიათებლებზე. Dell-ის ვებსაიტზე მომხმარებლები ირჩევენ მათთვის საინტერესო პროდუქტის სპეციფიკაციებს გვერდის ზედა მენიუდან. მარცხენა: ნაგულისხმევად, ნაჩვენებია ყველა მახასიათებელი. ცენტრში: მომხმარებელი ირჩევს მათ, რაც მას სჭირდება. მარჯვენა: ნაჩვენებია მხოლოდ ის, რაც მან აირჩია. თუ ცხრილი შეიცავს მონაცემებს, რომლებიც შეიძლება დაჯგუფდეს კატეგორიების მიხედვით, გააკეთეთ ეს და მიეცით საშუალება მობილურ მომხმარებლებს: Samsung.com-ზე შედარების სქემებს შეუძლიათ აჩვენონ ყველა სპეციფიკაცია, ან უბრალოდ მსგავსება პროდუქტებს შორის, ან უბრალოდ განსხვავებები ან მომხმარებლის მიერ შერჩეული კრიტერიუმები. საიტი აჯგუფებს მონაცემებს მსგავსი ატრიბუტებით, რაც საშუალებას გაძლევთ აირჩიოთ თქვენთვის საინტერესო მონაცემთა ნაკრები. ამავდროულად, მონაცემთა ჯგუფები აძლევენ მიმოხილვას გვერდის შინაარსზე და ეუბნებიან მომხმარებლებს, თუ რა პროდუქტის შესახებ არის ხელმისაწვდომი.
:
...
პირველი ადაპტაციის მეთოდი
<div class = "table-wrap" >
<მაგიდა >
<თად >
<tr >
<ე >სერვისი</th>
<ე >აღწერა</th>
<ე >ფასი</th>
<ე >ფასდაკლება</th>
</tr>
</thead>
<სხეული >
<tr >
<td >მობილური განლაგება</td>
<td >განლაგება ტელეფონებისთვის</td>
<td >$3000</td>
<td > 50%</td>
</tr>
<tr >
<td >დაშვება CMS WordPress-ზე</td>
<td ></td>
<td >$3000</td>
<td > 30%</td>
</tr>
</tbody>
</მაგიდა>
</div>
სერვისი
აღწერა
ფასი
ფასდაკლება
მობილური განლაგება
განლაგება ტელეფონებისთვის
$3000
50%
დაშვება CMS WordPress-ზე
საიტის შექმნა ადმინისტრატორით. პანელი
$3000
30%
1
2
3
4
5
6
7
8
9
10
11
12
13
.table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000;) .table-wrap ( overflow-y: scroll ; ) )
მე ვიპოვე კიდევ ერთი საინტერესო მიდგომა ცხრილის რეაგირებისთვის. იგი შედგება მონაცემთა ატრიბუტებისა და ფსევდო-კლასების გამოყენებით. ახლა მე გაჩვენებ ყველაფერს.მეორე ადაპტაციის მეთოდი
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
სერვისი
აღწერა
ფასი
ფასდაკლება
მობილური განლაგება
განლაგება ტელეფონებისთვის
$3000
50%
დაშვება CMS WordPress-ზე
საიტის შექმნა ადმინისტრატორით. პანელი
$3000
30%
სერვისი
აღწერა
ფასი
ფასდაკლება
მობილური განლაგება
განლაგება ტელეფონებისთვის
$3000
50%
დაშვება CMS WordPress-ზე
საიტის შექმნა ადმინისტრატორით. პანელი
$3000
30%
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
ტექსტი (ტექსტის გასწორება: ცენტრი; padding-top: 10%; font-family: sans-serif; background-image: url ("bg.jpg") ; ფონის ზომა: საფარი; სიმაღლე: 100vh; ფერი: #fff ;) .table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) მაგიდა (საზღვარი: 1px მყარი #ccc; სიგანე: 100% ბალიშები: 0, საზღვრები: 0 საზღვარი-მარჯვნივ: 1px მყარი #ddd ) ცხრილი th (ფერი: #fff; ფონის ფერი: #444; ტექსტის ტრანსფორმაცია: დიდი; შრიფტის ზომა: 14 პიქსელი;)
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 ეკრანი და (მაქს. სიგანე: 600 პიქსელი) (ცხრილი (საზღვარი: 0 ;) ცხრილი thead (ჩვენება: არცერთი;) ცხრილი tr (ზღვარი-ქვედა: 10 პიქსელი; ჩვენება: ბლოკი; საზღვარი-ქვედა: 2 პიქსელი მყარი #ddd;) ცხრილი td (ჩვენება: ბლოკი; ტექსტის გასწორება: მარჯვნივ font-size : 13px border-bottom : 1px dotted #ccc : 1px მყარი გამჭვირვალე ) table td:last-child ( border-bottom : 0 ; ) table td:fore ( content : attr(data- label ; ) float : text-transform : font-weight ;
1
2
3
4
5
6
7
8
9
10
ცხრილის_მონაცემები_1
ცხრილის_მონაცემები_2
ცხრილის_მონაცემები_3
ცხრილის_მონაცემები_4
ცხრილი_მონაცემები_5
ცხრილის_მონაცემები_6
ცხრილის_მონაცემები_7
ცხრილი_მონაცემები_8
ცხრილის_მონაცემები_9
ცხრილის_მონაცემები_10
1
2
3
ცხრილის_მონაცემები_1
ცხრილის_მონაცემები_2
ცხრილის_მონაცემები_3
CSS. კოდი: .box1 (პოზიცია: შედარებითი; ზევით: 0px; მარცხნივ: 0px; float: მარცხნივ; სიმაღლე: auto; სიგანე: 100%;) .content1 (პოზიცია: შედარებითი; ზედა: 0px; მარცხნივ: 0px; float: მარცხნივ; სიმაღლე: ავტომატური; სიგანე: 100%;) .მარცხნივ1 (პოზიცია: შედარებითი; ზედა: 0 პიქსელი; მარცხნივ: 0 პიქსელი; ათწილადი: მარცხნივ; სიმაღლე: ავტო; სიგანე: 64%;) მარცხნივ: 0px: მარცხნივ: ავტომატური სიგანე: 36%;) .bottom1 (პოზიცია: 0px;) /* დამატებითი CSS (ფერი: #ddd; ტექსტის გასწორება: ცენტრში;).content1 (ფონი: #bbb;). მარცხნივ1 (წთ-სიმაღლე: 100 პიქსელი; ბალიშები: 2%; ტექსტის გასწორება: დასაბუთება; ფონი: #006; -moz - box-sizing: border-box; ფონი: #060 -moz-box-sizing: border-box;) menu1 p (პოზიცია: ნათესავი; მარცხნივ: 0px; float: მარცხნივ; ავტო; სიგანე: 100%; padding: 0px; ზღვარი: 0px;).menu1 a (ფერი: #ddd; ტექსტის დეკორაცია: არცერთი;).menu1 a: hover (ტექსტის დეკორაცია: ხაზგასმული;). ქვედა1 (შეფუთვა: 2%; ფერი: #eee; ფონი: # 600;) ვებგვერდის მთელი შინაარსი მოთავსებულია box1 კონტეინერში. მის შიგნით არის ორი div კონტეინერი: 1. content1 ფაქტობრივი შინაარსით მარცხნივ და მენიუ მარჯვნივ. 2. ქვედა1 შინაარსი1 შემდეგ.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 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, გვხვდება culpa qui officia deserunt mollit anim id est laborum.
მცურავი ქვედა
თქვენი ტელეფონის როტაცია უკანასკნელი საშუალებაა
