Responsieve html-tabel online. De telefoon omdraaien is een laatste redmiddel

laat een reactie achter 6,950

Het is geen geheim voor elke lay-outontwerper dat tabellen slecht zijn. Ze zijn moeilijk aan te passen en aan te passen. Als het op de desktopversie van de site nog steeds vrij eenvoudig is om een tabel te schilderen, dan gaat alles mis wanneer de adaptieve lay-out begint.

Een van de meest effectieve opties is om horizontaal scrollen voor de tabel te maken. Het is gemakkelijk te doen, maar de post van vandaag gaat daar niet over. Ik zal het je echter laten zien.

De eerste manier om je aan te passen

<div class = "table-wrap"> <tafel> <hoofd> <tr> <de> Dienst</ de> <de> Beschrijving</ de> <de> Prijs</ de> <de> Korting</ de> </ tr> </ hoofd> <tbody> <tr> <td> Mobiele lay-out</ td> <td> Lay-out voor telefoons</ td> <td>$3000</ td> <td> 50%</ td> </ tr> <tr> <td> Landing op CMS WordPress</ td> <td></ td> <td>$3000</ td> <td> 30%</ td> </ tr> </ tbody> </ tafel> </ div>

Dienst	Beschrijving	Prijs	Korting
Mobiele lay-out	Lay-out voor telefoons	$3000	50%
Landing op CMS WordPress	Website ontwikkeling met admin. paneel	$3000	30%

Dit hele ding stylen (we moeten vooral stylen) tafelomslag).

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;))

Table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: # 000;) @media screen en (max-width: 600px) (.table-wrap (overloop-y: scroll ;))

Als gevolg hiervan zal de tabel tot 600 pixels breed scrollen, maar de site niet. Handig, maar vandaag wil ik het over iets anders hebben.
Ik vond een andere interessante benadering van tabelresponsiviteit. Het bestaat uit het gebruik van data-attributen en pseudo-klassen. Nu zal ik je alles laten zien.

De tweede manier van aanpassen

Laten we eerst de opmaak wijzigen:

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

Dienst	Beschrijving	Prijs	Korting
Mobiele lay-out	Lay-out voor telefoons	$3000	50%
Landing op CMS WordPress	Website ontwikkeling met admin. paneel	$3000	30%

Dienst	Beschrijving	Prijs	Korting
Mobiele lay-out	Lay-out voor telefoons	$3000	50%
Landing op CMS WordPress	Website ontwikkeling met admin. paneel	$3000	30%

Geef elke kolom een attribuut datalabel, die in de toekomst nuttig voor ons zullen zijn.

We stellen de basisstijlen in:

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

body (text-align: center; padding-top: 10%; font-family: sans-serif; background-image: url ("bg.jpg"); background-size: cover; height: 100vh; color: #fff ;) .table-wrap (text-align: center; display: inline-block; background-color: #fff; padding: 2rem 2rem; color: # 000;) table (rand: 1px solid #ccc; width: 100% ; margin: 0; padding: 0; border-collapse: collaps; border-spacing: 0;) table tr (border: 1px solid #ddd; padding: 5px;) table th, table td (padding: 10px; text-align : center; border-right: 1px solid #ddd;) table th (kleur: #fff; background-color: # 444; text-transform: hoofdletters; font-size: 14px; letter-spatiëring: 1px;)

Het ziet eruit als een gewone tabel, natuurlijk, waarbij de site met 320-420 pixels wordt verschoven, we zullen een horizontale scroll van de hele site zien. Niet het punt.

Hoe herstel je het? stijlen toevoegen:

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 scherm en (max-breedte: 600px) ( table (rand: 0;) table thead (display: none;) table tr (marge-bottom: 10px; display: block; border-bottom: 2px solid #ddd;) table td (display: block; text-align: rechts ; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparant;) table td: last-child (border-bottom: 0;) table td: before (content: attr (data- label); float: left; text-transform: hoofdletters; font-weight: vet;))

@media-scherm en (max-breedte: 600px) (tabel (rand: 0;) tabelkop (weergave: geen;) tabel tr (marge-bodem: 10px; weergave: blok; grens-bodem: 2px vol #ddd;) table td (display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px effen transparant;) table td: last-child (border-bottom: 0; ) table td: before (content: attr (data-label); float: left; text-transform: hoofdletters; font-weight: vet;))

Hier hebben we de tabelrijen blokkerig gemaakt, de kolomnamen verwijderd en de tekst van de kolommen zelf gerechtvaardigd. Op zijn beurt, met behulp van de pseudo-klasse : voordat we voegen onze datumattributen aan de linkerkant toe. Het blijkt als volgt:

Hier is nog een pen:

Zoals je kunt zien, hebben we de tabelrijen veranderd in een klein blok dat alle informatie bevat. Ik denk dat deze responsieve optie voor tabellen prima is voor kleine tabellen. Gebruik het, vrienden!

In Aspro: Vervolgens kunt u vanaf versie 1.1.7 tabellen aanpassen voor de mobiele versie. Het is noodzakelijk om wijzigingen aan te brengen in de broncode van de pagina - voeg een klasse toe die verantwoordelijk is voor het aanpassingsvermogen van tabellen.

Een eenvoudige tabel in de mobiele versie reikt verder dan de pagina.

Om de tabel responsief te maken, gaat u naar de pagina bewerken waar de tabel is toegevoegd. Ga dan naar de bronbewerkingsmodus.

Voor de openingstag

voeg een tag toe met een klasse

Na de afsluitende tag

schrijf een tag

...

Sla uw wijzigingen op.

Nu schuift de tafel en gaat niet verder dan het frame.

Bij horizontaal scrollen gaat de tabel niet over de grenzen heen, maar bij het naar rechts scrollen in de mobiele versie opent een zijmenu. Om te voorkomen dat het menu het werken met de tabel verstoort, moet u de paginacode wijzigen.

U moet de klasse "swipeignore" aan de tag toevoegen

die we eerder hebben toegevoegd. Als gevolg hiervan, vóór de tag een tag met klassen moet worden geregistreerd

...

Sla uw wijzigingen op.

Nu, wanneer de tabel naar rechts scrolt, wordt het zijmenu niet geopend, wat het werk met de tabel belemmerde.

U kunt de weergave van het zijmenu verbergen wanneer u naar rechts scrolt en op andere pagina's. U moet de klasse "swipeignore" aan de tag toevoegen

blok waarvoor u de weergave van het zijmenu wilt verwijderen. Als aan de tag geen klasse is toegewezen, heeft deze de vorm

... Als de tag heeft

klassen zijn al toegevoegd, schrijf dan "swipeignore" gescheiden door een spatie, bijvoorbeeld

Gegevenstabellen doen niet zo goed aan responsive design. Helaas is er dit moment. Responsief ontwerp is alles wat nodig is om het ontwerp aan te passen aan verschillende schermformaten. Dus wat gebeurt er als het scherm smaller is dan de minimale breedte van de gegevenstabel? Je kunt uitzoomen en de hele tabel zien, maar de tekst is dan te klein om te lezen. Of u kunt dichter bij het leespunt komen, maar u moet verticaal horizontaal scrollen en (verdrietig) om de tabel te bekijken. De gegevenstabellen kunnen behoorlijk breed zijn en moeten dat ook zijn. Tabellen kunnen flexibel zijn in de breedte (wight = 100%), maar de inhoud van de cellen kan zo smal worden dat ze niet zichtbaar zijn.

Om dit onaangename moment te vermijden, worden adaptieve tabellen gebruikt. Zo'n tabel geeft een horizontale schuifbalk weer als het scherm te klein is om de volledige inhoud weer te geven.

Hoe maak je een responsieve tabel met CSS

Voeg een containerelement toe om een responsieve tabel te maken overloop-x: auto rondom

...

Opmerking. In OS X Lion (op Mac) zijn schuifbalken standaard verborgen en worden ze alleen weergegeven wanneer ze in gebruik zijn (zelfs als deze is ingesteld op "overflow: scroll" of auto).

Responsive websites zijn al lang geen gimmick meer en worden steeds vaker gevonden. Gezien het laatste nieuws met de rangschikking van zoekmachines (als iemand het niet weet, wordt bij het zoeken vanaf een mobiel apparaat prioriteit gegeven aan responsieve sites), zal het aantal van dergelijke sites blijven groeien. Je kunt tegen aanpassing voor mobiele apparaten zijn of ervoor spreken, maar het feit blijft: steeds meer klanten eisen dat hun site responsive is en webmasters moeten het doen.

Een van de belangrijkste problemen bij het aanpassen van een site voor verschillende resoluties zijn tabellen. Zeker als ze veel data hebben. Laten we eens kijken naar twee manieren om een responsieve tabel te maken.

Laten we eerst eens kijken hoe de tabel eruit ziet:

Telefoon model	Prijs	RAM, GB	Diagonaal, inches	PPI	Batterij, mAh
Een plus een	RUB 100.500	3	5.5	401	3100
OnePlus Twee	RUB 100.500	4	5.5	401	3300
Oneplus x	RUB 100.500	3	5	441	2525

Responsieve tabellay-out in Bootstrap-stijl

Laten we het botweg zeggen: echt adaptief is zo'n tabel niet te noemen. Het ziet er goed uit op mobiel, niets steekt uit en de lay-out van de site "vloeit" niet. Deze methode is zeer geschikt als tabellen zeldzaam zijn op uw site en het daarom geen zin heeft om een plug-in aan te sluiten en extra stijlen te schrijven. Deze methode wordt gebruikt door Bootstrap. Dus hoe wordt dit geïmplementeerd?

Het is simpel: de tabel is verpakt in een div met een maximale breedte van 100% en overloop: auto.

...

Als de tafel lang is, kunt u ook de maximale hoogte instellen en de tafelkop bevestigen.

Het resultaat, zoals in het volgende voorbeeld, kan worden bekeken op: deze pagina.

Lay-out in een echt responsieve tabel

Als je vaak tabellen op je site hebt, is het zinvol om de Footable-plug-in te gebruiken.

Eerst moet je de plug-in verbinden (downloaden op GitHub of verbinden vanaf CDN) en deze ook initialiseren:

Hier moeten we iets verduidelijken: het script houdt om de een of andere reden geen rekening met de breedte van de viewport, maar met de breedte van de tabel. Om dit op te lossen, moet u het script enigszins "moderniseren":

JQuery (function () (jQuery (". Table")). Footable ((calculateWidthOverride: function () (return (breedte: jQuery (venster) .width ());)));))

Bij de initialisatie specificeren we de klasse van de tabel of alleen de tabeltag, als we willen dat alle tabellen op de site responsief zijn.

...

Telefoon model	Prijs	RAM, GB	Diagonaal, inches	PPI	Batterij, mAh

Wat betekent dit allemaal? De tablets verbergen de kolommen "RAM", "Diagonaal", "PPI" en "Batterij". Bij het afbouwen naar telefoons komt de kolom "Prijs" daar ook bij.

Breekpunten kunnen worden opgegeven in initialisatie:

JQuery (function () (jQuery (". Table")). Footable ((calculateWidthOverride: function () (return (breedte: jQuery (window) .width ());), breekpunten: (mobiel: 0, tablet: 720, bureaublad: 1024)));))

Dit betekent dat in het bereik 0-720 de regel geldt voor mobiel, 720-1024 voor tablet en boven 1024 voor desktop. Niets houdt u tegen om, indien nodig, nog meer regels te maken.

U kunt een kolom ook standaard laten uitvouwen. Om dit te doen, geeft u het data-attribuut data-expanded = "true" op

... ...

Een plus een	RUB 100.500	3	5.5	401	3100

De mogelijkheden van de plug-in eindigen daar niet, maar voor het maken van responsieve tabellen is dit voldoende. De rest van de mogelijkheden bekijken we de volgende keer.

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

Als de HTML-tabel te veel gegevens bevat, wordt deze breder dan de beschikbare ruimte op de pagina en begint deze verder te gaan. Om de situatie te verhelpen, kunt u horizontaal scrollen aan de tabel toevoegen. Voorbeeld:

1	2	3	4	5	6	7	8	9	10
Table_data_1	Table_data_2	Table_data_3	Table_data_4	Table_data_5	Table_data_6	Table_data_7	Table_data_8	Table_data_9	Table_data_10

HTML/XHTML. De code:

<tafel>

<tr>

</ tr>

<tr>

<td> Table_data_1</ td>

<td> Tabel_data_2</ td>

<td> Tabel_data_3</ td>

<td> Tabel_data_4</ td>

<td> Tabel_data_5</ td>

<td> Tabel_data_6</ td>

<td> Tabel_data_7</ td>

<td> Tabel_data_8</ td>

<td> Tabel_data_9</ td>

<td> Tabel_data_10</ td>

</ tr>

</ tafel>

tafel(display: blok; overloop-x: auto;)

/ * Extra CSS, om het voorbeeld er mooi uit te laten zien: * /

tafel(border-collapse: ineenstorting;)

tafel td, dit(vulling: 10px; rand: 1px # 000 effen;)

Opmerking: CSS-eigenschap weergave: blok zorgt ervoor dat de tabel in de breedte slechts zoveel ruimte in beslag neemt als nodig is om in de gegevens te passen zonder visuele vervorming. Niet meer zonder zich uit te strekken over de volledige breedte van de beschikbare ruimte op de pagina. Zelfs als de CSS-code wordt toegevoegd breedte: 100%... Voorbeeld:

1	2	3
Table_data_1	Table_data_2	Table_data_3

Aliosque ondertitels en thema's

Een absoluut gepositioneerd element horizontaal uitlijnen op het midden met behulp van CSS. Voorbeeld: HTML / XHTML. De code:

CSS. Code: .voorbeeld (positie: relatief; links: 0px; boven: 0px; hoogte: 90px; breedte: 100%; zwevend: links; opvulling: 10px; rand: 1px #ccc effen; achtergrond: #fafafa; -moz-box -sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) .voorbeeld img (positie: absoluut; links: 0px; rechts: 0px; margin: 0px auto; width: 68px;) Het voorbeeld lijnt een absoluut gepositioneerd img-element uit met het midden, maar in het algemeen werkt deze methode van horizontale centrering met andere, zowel inline als block absoluut gepositioneerde elementen. De breedte van een absoluut gepositioneerd element kan ook in procenten of in andere eenheden zijn. De CSS-eigenschappen van de container (in het voorbeeld), waarbinnen het in het midden uitgelijnde element zich bevindt, kunnen heel verschillend zijn, de uitlijning in het midden wordt gemaakt met behulp van stijlen die direct gerelateerd zijn aan het element: .example img (positie : absoluut; links: 0px; rechts: 0px; marge: 0px auto;). [1] En ook in Netscape 8.01+, Mozilla 1.5+. [2] En ook in Netscape 8.01+, Mozilla 1.5+.

Er is geen eigenschap "float: bottom" in CSS, maar het effect kan op verschillende andere manieren worden bereikt. Voorbeeld: 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 Link 2 Link 3 Zwevende bodem HTML / XHTML. De code:

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

Link 2

Koppeling 3

Zwevende bodem

CSS. Code: .box1 (positie: relatief; boven: 0px; links: 0px; zwevend: links; hoogte: auto; breedte: 100%;) .content1 (positie: relatief; boven: 0px; links: 0px; zwevend: links; hoogte: auto; breedte: 100%;) .left1 (positie: relatief; boven: 0px; links: 0px; zwevend: links; hoogte: auto; breedte: 64%;) .menu1 (positie: relatief; boven: 0px; left: 0px; float: left; height: auto; width: 36%;) .bottom1 (position: absolute; bottom: 0px; right: 0px;) / * Extra CSS, om het voorbeeld een beetje op * / te laten lijken .box1 (kleur: #ddd; tekstuitlijning: midden;) .content1 (achtergrond: #bbb;) .left1 (min-hoogte: 100px; opvulling: 2%; tekstuitlijning: uitvullen; achtergrond: # 006; - moz -box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) .menu1 (opvulling: 2%; float : rechts; achtergrond: # 060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) . menu1 p (positie: relatief; boven: 0px; links: 0px; zwevend: links; heig ht: automatisch; breedte: 100%; opvulling: 0px; marge: 0px;) .menu1 a (kleur: #ddd; tekstdecoratie: geen;) .menu1 a: hover (tekstdecoratie: onderstrepen;) .bottom1 (opvulling: 2%; kleur: #eee; achtergrond: # 600;) Alle inhoud van de webpagina bevindt zich in de containerbox1. Binnenin zijn twee div's: 1. content1 met de daadwerkelijke inhoud aan de linkerkant en het menu aan de rechterkant. 2.bottom1 na inhoud1.