Det er ingen hemmelighet for enhver layoutdesigner at tabeller er onde. De er vanskelige å tilpasse og tilpasse. Hvis det fortsatt er ganske enkelt å male et bord på skrivebordsversjonen av nettstedet, går alt til helvete når det adaptive oppsettet begynner.
Faktisk er et av de mest effektive alternativene å lage horisontal rulling for bordet. Det er enkelt å gjøre, men dagens innlegg handler ikke om det. Jeg skal imidlertid vise deg.
Den første måten å tilpasse seg på
| <div class = "table-wrap"> <tabell> <thead> <tr> <th> Service</ th> <th> Beskrivelse</ th> <th> Pris</ th> <th> Rabatt</ th> </ tr> </ thead> <kroppen> <tr> <td> Mobil layout</td> <td> Layout for telefoner</td> <td>$3000</td> <td> 50%</td> </ tr> <tr> <td> Lander på CMS WordPress</td> <td></td> <td>$3000</td> <td> 30%</td> </ tr> </ tbody> </ tabell> </ div> |
| Service | Beskrivelse | Pris | Rabatt |
|---|---|---|---|
| Mobil layout | Layout for telefoner | $3000 | 50% |
| Lander på CMS WordPress | Nettsideutvikling med admin. panel | $3000 | 30% |
Styling av hele greia (vi trenger hovedsakelig å style bord-innpakning).
| 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 (tekstjustering: center; display: inline-block; bakgrunnsfarge: #fff; polstring: 2rem 2rem; farge: # 000;) @mediaskjerm og (maks-bredde: 600px) (.table-wrap (overløp-y: rull;))
Som et resultat vil tabellen rulle opp til 600 piksler bred, men nettstedet vil ikke. Praktisk, men i dag vil jeg gjerne snakke om noe annet.
Jeg fant en annen interessant tilnærming til tabellrespons. Den består av å bruke dataattributter og pseudoklasser. Nå skal jeg vise deg alt.
Den andre måten å tilpasse seg på
Først, la oss endre markeringen:
| 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 |
|
| Service | Beskrivelse | Pris | Rabatt |
|---|---|---|---|
| Mobil layout | Layout for telefoner | $3000 | 50% |
| Lander på CMS WordPress | Nettsideutvikling med admin. panel | $3000 | 30% |
Gi hver kolonne et attributt data-etikett, som vil være nyttig for oss i fremtiden.
Vi setter de grunnleggende stilene:
| 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 (border: 1px solid #ccc; width: 100% ; margin: 0; padding: 0; border-collapse: collapse; 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 (farge: #fff; bakgrunnsfarge: # 444; teksttransformasjon: store bokstaver; font-size: 14px; bokstavavstand: 1px;) |
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 (border: 1px solid #ccc; width: 100% ; margin: 0; padding: 0; border-collapse: collapse; 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 (farge: #fff; bakgrunnsfarge: # 444; teksttransformasjon: store bokstaver; font-size: 14px; bokstavavstand: 1px;)
Det ser ut som en vanlig tabell, selvfølgelig, som forskyver nettstedet med 320-420 piksler, vi vil se en horisontal rulling av hele nettstedet. Ikke poenget.
Hvordan fikse det? legg til stiler:
| 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 | @mediaskjerm og (maks. bredde: 600px) ( table (border: 0;) table thead (display: none;) table tr (margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd;) table td (display: block; text-align: right ; font-size: 13px; border-bottom: 1px prikket #ccc; border-right: 1px solid transparent;) table td: last-child (border-bottom: 0;) table td: before (innhold: attr (data- label); flyte: venstre; tekst-transform: store bokstaver; font-weight: fet;)) |
@medieskjerm og (maks-bredde: 600px) (tabell (kant: 0;) table thead (display: none;) table tr (margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd;) table td (display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; border-right: 1px solid transparent;) table td: last-child (border-bottom: 0; ) tabell td: før (innhold: attr (data-label); float: venstre; tekst-transform: store bokstaver; font-weight: fet;))
Her har vi gjort tabellradene blokkerte, fjernet kolonnenavnene og justert teksten til selve kolonnene. I sin tur bruker pseudoklassen : før vi legger til datoattributtene våre til venstre. Det blir slik: 
Her er en annen penn:
Som du ser har vi gjort tabellradene om til en liten blokk som inneholder all informasjonen. Jeg tror dette bordresponsive alternativet er greit for små bord. Bruk den, venner!
I Aspro: Deretter, fra og med versjon 1.1.7, kan du tilpasse tabeller for mobilversjonen. Det er nødvendig å gjøre endringer i kildekoden til siden - legg til en klasse som er ansvarlig for tilpasningsevnen til tabeller.
En enkel tabell i mobilversjonen strekker seg utover siden.
For å gjøre tabellen responsiv, gå til å redigere siden der tabellen er lagt til. Gå deretter til kilderedigeringsmodus.
Før åpningsetiketten
