Site-urile web adaptive au încetat de mult să mai fie o curiozitate și devin din ce în ce mai comune. Având în vedere ultimele știri cu clasamente motoarele de căutare(dacă cineva nu știe, atunci când caută pe un dispozitiv mobil, se acordă prioritate site-urilor receptive), numărul acestor site-uri va continua să crească. Se poate opune adaptării sub dispozitive mobile sau fiți în favoarea, dar adevărul rămâne: din ce în ce mai mult, clienții cer ca site-ul lor să fie adaptabil, iar webmasterii trebuie să facă acest lucru.

Una dintre principalele probleme la adaptarea unui site la diferite rezoluții sunt tabelele. Mai ales dacă conțin o mulțime de date. Să ne uităm la două metode de aspect masă adaptivă.

Mai întâi, să vedem cum arată tabelul:

Să fim sinceri: un astfel de tabel nu poate fi numit cu adevărat adaptativ. Arată bine pe mobil, nimic nu iese în evidență nicăieri și aspectul site-ului nu „curge”. Această metodă este potrivită dacă tabelele sunt rare pe site-ul dvs. și nu are rost să conectați un plugin și să scrieți stiluri suplimentare din cauza lor. Această metodă este folosită de Bootstrap. Deci, cum funcționează asta?

Este simplu: masa este înfășurată într-un div, care este setat la o lățime maximă de 100% și overflow: auto.

Dacă masa este lungă, puteți, de asemenea, să setați înălțimea maximă și să fixați antetul mesei.

Rezultatul, ca exemplul următor, poate fi vizualizat pe această pagină.

Dacă aveți adesea tabele pe site-ul dvs., este logic să utilizați pluginul Footable.

Mai întâi trebuie să conectați pluginul (descărcați-l pe GitHub sau conectați-l de la un CDN) și, de asemenea, să îl inițializați:

$(function() ( $(".table").footable(); ));

Aici trebuie să clarificăm ceva: dintr-un motiv oarecare, scriptul nu numără lățimea ferestrei de vizualizare, ci lățimea tabelului. Pentru a remedia acest lucru, trebuie să „modernizați” ușor scriptul:

JQuery(funcție () ( jQuery(".table").footable(( calculateWidthOverride: function() ( return (lățime: jQuery(window).width()); ) )); ))

La inițializare, specificăm clasa tabelului sau doar eticheta tabelului dacă dorim ca toate tabelele de pe site să fie adaptive.

Ce înseamnă toate acestea? Pe tablete, coloanele „RAM”, „Diagonală”, „PPI” și „Baterie” vor fi ascunse. Când se reduce la telefoane, li se va alătura și coloana „Preț”.

Punctele de control pot fi specificate în inițializare:

JQuery(funcție () ( jQuery(".table").footable(( calculateWidthOverride: function() ( return (lățime: jQuery(window).width()); ), puncte de întrerupere: ( mobil: 0, tabletă: 720, desktop: 1024 ) ));

Aceasta înseamnă că în intervalul 0-720 regula se aplică pentru mobil, 720-1024 pentru tabletă și peste 1024 pentru desktop. Nimic nu vă împiedică să creați și mai multe reguli dacă este necesar.

De asemenea, vă puteți asigura că o anumită coloană este extinsă în mod implicit. Pentru a face acest lucru, specificați atributul de date data-expanded="true"

Capacitățile pluginului nu se termină aici, dar este suficient pentru a crea tabele adaptabile. Vom analiza alte posibilități data viitoare.

Nu este un secret pentru orice designer de layout că mesele sunt rele. Sunt greu de adaptat și personalizat. Dacă pe versiunea desktop a site-ului este încă destul de ușor să creezi un tabel, atunci când începe aspectul adaptiv, totul se duce la naiba.

De fapt, una dintre opțiunile eficiente este crearea unui scroll orizontal pentru tabel. Nu este greu de făcut, dar nu despre asta este vorba în postarea de astăzi. Cu toate acestea, vă voi arăta.

Să stilăm totul (în principal trebuie să stilăm table-wrap ).

Table-wrap ( text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: #000; ) @media ecran și (max-width: 600px) ( .table-wrap ( overflow-y: defilare; ) )

Ca urmare, la o lățime de PÂNĂ LA 600 de pixeli, tabelul se va derula, dar site-ul nu. Convenabil, dar astăzi aș vrea să vorbesc despre altceva.
Am găsit o altă abordare interesantă a răspunsului la masă. Constă în utilizarea atributelor de date și a pseudoclaselor. Acum îți voi arăta totul.

Mai întâi, să schimbăm marcajul:

Am dat fiecărei coloane un atribut de etichetă de date, care ne va fi util în viitor.

Setați stilurile de bază:

body ( text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url("bg.jpg"); background-size: cover; inaltime: 100vh; culoare: #fff ; ) .table-wrap ( text-align: center; display: inline-block; culoare de fundal: #fff; umplutură: 2rem 2rem; culoare: #000; ) tabel (bord: 1px solid #ccc; lățime: 100% ; margine: 0; border-collapse: margine-spație: 1 px solid #ddd; ) table th, 10px; text-align; chenar-dreapta: 1px solid #ddd; ) al tabelului (culoare: #fff; culoarea fundalului: #444; text-transform: majuscule; dimensiunea fontului: 14px; spațiere între litere: 1px; )

Arată ca un tabel obișnuit, desigur, prin mutarea site-ului cu 320-420 pixeli, vom vedea un scroll orizontal al întregului site. Nu ideea.

Cum să remediez asta? adăugați stiluri:

Ecran @media și (lățime maximă: 600 px) ( tabel ( chenar: 0; ) tabel ( afișare : niciunul; ) table tr ( margine-jos: 10px; afișare: bloc; chenar-jos: 2px solid #ddd; ) table td ( afișare: bloc; text-align: right; font-size: 13px; chenar-jos: 1px punctat #ccc; chenar-dreapta: 1px solid transparent; ) table td:last-child ( chenar-jos: 0; ) tabel td:before (conținut: attr(etichetă-date); float: stânga; text-transform: majuscule; font-weight: bold; ) )

Aici am făcut rândurile tabelului ca un bloc, am eliminat numele coloanelor și am aliniat textul coloanelor însele la dreapta. La rândul său, folosind pseudo-clasa :before, atașăm atributele noastre date la marginea din stânga. Se dovedește așa:

Iată un alt stilou:

După cum puteți vedea, am transformat rândurile tabelului într-un bloc mic care conține toate informațiile. Cred că această opțiune de adaptare a mesei este potrivită pentru mese mici. Bucurați-vă, prieteni!

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].

Dacă un tabel HTML conține prea multe date, acesta devine mai larg decât spațiul disponibil pe pagină și începe să depășească. Pentru a remedia situația, puteți adăuga derulare orizontală la tabel. Exemplu:

HTML/XHTML. Cod:

1

2

3

4

5

6

7

8

9

10

Tabel_date_1

Tabel_date_2

Tabel_date_3

Tabel_date_4

Tabel_date_5

Tabel_date_6

Tabel_date_7

Tabel_date_8

Tabel_date_9

Tabel_date_10

tabel (afișare: bloc; overflow-x: auto;)

/* CSS suplimentar, doar pentru a da exemplului un aspect: */

tabel (border-collapse: collapse;)

tabel td,th (padding: 10px; chenar: 1px #000 solid;)

Nota: proprietate CSS display: block face ca tabelul să ocupe doar atâta lățime cât are nevoie pentru a găzdui datele fără distorsiuni vizuale. Nu mai mult, fără a se întinde pe toată lățimea spațiului disponibil pe pagină. Chiar dacă lățimea: 100% este adăugat la codul CSS. Exemplu:

Aliosc subditos et theme

Aliniați orizontal un element poziționat absolut la centru cu folosind CSS. Exemplu: HTML/XHTML. Cod: CSS. Cod: .exemplu (poziție: relativ; stânga: 0px; sus: 0px; înălțime: 90px; lățime: 100%; float: stânga; umplutură: 10px; chenar: 1px #ccc solid; fundal: #fafafa; -moz-box -sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box;) .exemplu img (poziție: absolut; dreapta: 0px margin: 0px auto lățime: 68px;) În exemplu, elementul img poziționat absolut este centrat, dar în general această metodă alinierea centrului orizontal funcționează cu alte elemente poziționate absolut, atât în ​​linie, cât și în bloc. Lățimea unui element poziționat absolut poate fi și în procente sau alte unități de măsură. Proprietățile CSS ale containerului (în exemplul .example) în interiorul căruia se află elementul aliniat la centru pot fi foarte diferite alinierea la centru este creată folosind stiluri direct legate de element: .example img (poziție: absolut; stânga: 0px; ; dreapta: 0px margin: 0px auto;). [ 1 ] Și, de asemenea, în Netscape 8.01+, Mozilla 1.5+. [ 2 ] Și, de asemenea, în Netscape 8.01+, Mozilla 1.5+.

Nu există nicio proprietate „float: bottom” în CSS, dar efectul poate fi obținut în mai multe alte moduri. Exemplu: 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, sunt in culpa qui officia deserunt mollit anim id est laborum. Legătură 1 Legătură 2 Legătură 3 HTML/XHTML de jos flotant. Cod: 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, sunt in culpa qui officia deserunt mollit anim id est laborum.

Link 1

Legatura 2

Legatura 3

Tabelele de date nu se descurcă foarte bine design adaptiv. Din păcate, acest moment există. Designul receptiv este tot ce aveți nevoie pentru a vă personaliza designul pentru a se potrivi ecranelor dimensiuni diferite. Deci, ce se întâmplă când ecranul este mai îngust decât lățimea minimă a tabelului de date? Puteți să micșorați și să vedeți întregul tabel, dar dimensiunea textului va fi prea mică pentru a fi citită. Sau puteți mări punctul de citire, dar va trebui să derulați vertical pe orizontală și (din păcate) să vizualizați tabelul. Tabelele de date pot fi destul de largi și cu siguranță sunt. Tabelele pot fi flexibile ca lățime (greutate=100%), dar conținutul celulelor poate deveni atât de îngust încât pur și simplu nu poate fi văzut.

Pentru a evita acest moment neplacut se folosesc tabele adaptative. Un astfel de tabel va afișa o bară de defilare orizontală dacă ecranul este prea mic pentru a afișa întregul conținut.

Pentru a crea un tabel receptiv, adăugați un element container overflow-x:autoîn jurul

Nota. În OS X Lion (pe Mac), barele de defilare sunt ascunse în mod implicit și apar numai atunci când sunt utilizate (chiar dacă sunt setate la „overflow:scroll” sau automat).

Dacă tabelele s-ar putea adapta bine la diferite rezoluții ale ecranului, atunci omenirea ar face în continuare machete de tabel până în prezent. Am găsit încă acel timp și știu despre ce vorbesc.

Cu toate acestea, trăim într-un timp diferit, aspectul tabelului a căzut în uitare, dar nevoia de a folosi tabele clasice pe site-uri web încă rămâne. Prin urmare, nu vom nega existența tabelelor, ci mai degrabă vom afla despre într-un mod simplu cum să faci un tabel receptiv.

Am creat un tabel HTML simplu, atâta timp cât se potrivește pe ecran, totul este OK. Când lățimea ecranului este redusă, tabelul va fi tăiat și nu îi vom vedea datele, sau va deveni foarte mic și din nou nu vom vedea nimic.

Poate ați observat că am plasat tabelul într-o etichetă div și, evident, pentru un motiv. Eticheta div în sine nu face nimic decât dacă o stilăm.

Prin setarea unei singure proprietăți, tabelul se adaptează, va apărea automat o bară de defilare orizontală atunci când conținutul din interiorul etichetei div nu se mai potrivește cu lățimea curentă a ecranului de-a lungul axei X.

Div(
overflow-x: auto;
)

Să stilăm restul etichetelor de tabel:

Tabel (
border-colaps: colaps; /* Afișează numai linii simple */
distanță-limită: 0; /* Distanța dintre celule */
latime: 100%;
chenar: 1px solid #afb42b;
culoare: #212121;
}

Th, td (
text-align: stânga;
umplutură: 8px;
}

Stilul etichetei tr (rând) merită un comentariu separat. A devenit deja norma ca rândurile de mese să aibă un aspect în dungi (zebră). Pentru a face acest lucru, utilizați pseudo-clasa :nth-child cu valoarea între paranteze even . Valoarea pară atribuie proprietăți tuturor elementelor pare, în cazul nostru culoarea de fundal. Astfel, masa va fi dungi.