Kako se nositi s prijelomima stranica prilikom ispisa velike HTML tablice (8)

Imam projekt koji zahtijeva ispis HTML tablice s mnogo redaka.

Moj problem je kako se tablica ispisuje na više stranica. Ponekad prereže redak na pola, čineći ga nečitljivim jer je jedna polovica na rubu stranice, a ostatak se ispisuje na vrhu sljedeće stranice.

Jedino uvjerljivo rješenje kojeg se mogu sjetiti je korištenje složenih DIV-ova umjesto tablice i forsiranje prijeloma stranica ako je potrebno... ali prije nego što prođem kroz sve promjene mislio sam da bih mogao pitati ovdje ranije.

Koristite ova CSS svojstva:

Prijelom stranice nakon prijeloma stranice prije

Na primjer:

@media print ( tablica (prijelom stranice-nakon:uvijek)) ....

Nijedan od odgovora ovdje nije radio za mene u Chromeu. AAverin na GitHubu stvorio je koristan Javascript za ovo i radio je za mene:

Samo dodajte js u svoj kod i dodajte klasu splitForPrint u tablicu i ona će uredno podijeliti tablicu na više stranica i dodati zaglavlje tablice svakoj stranici.

Napomena: Kada koristite prijelom stranice: uvijek za oznaku, stvara se prijelom stranice nakon zadnjeg bita tablice, stvarajući svaki put potpuno praznu stranicu! Da biste to popravili, jednostavno ga promijenite u page-break-after: auto. Ispravno će se pokvariti i neće stvoriti dodatnu praznu stranicu.

@media print ( table ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....

Prihvaćeni odgovor nije radio za mene u svim preglednicima, ali praćenje css-a mi je radilo:

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

HTML struktura bio je:

...

U mom slučaju bilo je nekih dodatnih problema s thead tr, ali ovo je riješilo izvorni problem zadržavanja retka tablice.

Zbog problema s zaglavljem dobio sam:

#theTable td * ( page-break-inside:avoid; )

Ovo nije spriječilo pucanje redova; samo sadržaj svake ćelije.

Završio sam s pristupom @vicenteherrera, s nekim izmjenama (što bi moglo biti bootstrap 3).

U osnovi; ne možemo razbiti tr s ili td jer oni nisu elementi na razini bloka. Stoga umetnemo div u svaki i primijenimo naša pravila prijeloma stranice* na div. Drugo, dodajemo malo ispune na vrh svakog od ovih divova kako bismo nadoknadili sve stilske artefakte.

@media print ( /* izbjegavajte rezanje tr"ova na pola */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zamotajte svaki tr i td" sadržaj unutar div // (todo: dodajte logiku tako da ovo radimo samo pri ispisu) $("table tbody th, table tbody td").wrapInner(" " ); ))

Ispravci i prilagodbe dodataka bili su nužni kako bi se nadoknadilo nešto podrhtavanja koje je uvedeno (iz bootstrapa, pretpostavljam). Nisam siguran predstavljam li novo rješenje iz ostalih odgovora na ovo pitanje, ali možda nekome pomogne.

Nedavno sam riješio ovaj problem dobrim rješenjem.

AvoidBreak ( border: 2px solid; page-break-inside:avoid; )

Funkcija Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Djeluje kao šarm!

Testirao sam mnoga rješenja i nijedno nije dobro funkcioniralo.

Pa sam probao mali trik i djeluje:

tfoot sa stilom: položaj: fiksan; dolje: 0px; položaj: fiksni; dolje: 0px; nalazi se na dnu zadnje stranice, ali ako je podnožje previsoko, preklapa sadržaj tablice.

tfoot samo s: display: table-footer-group; ne preklapa se, ali nije na dnu zadnje stranice...

Stavimo dvije tfoot:

TFOOT.placer ( display: table-footer-group; visina: 130px; ) TFOOT.contenter ( display: table-footer-group; pozicija: fiksna; bottom: 0px; height: 130px; ) vaš dugi tekst ili visoka slika ovdje

Jedan rezervira prostor na nezadnjim stranicama, a drugi u vašem osobnom podnožju.

Testna tablica ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

naslov

bilješke

x

x

x

Kako se nositi s prijelomima stranica prilikom ispisa velike HTML tablice (8)

Imam projekt koji zahtijeva ispis HTML tablice s mnogo redaka.

Moj problem je kako se tablica ispisuje na više stranica. Ponekad prereže redak na pola, čineći ga nečitljivim jer je jedna polovica na rubu stranice, a ostatak se ispisuje na vrhu sljedeće stranice.

Jedino uvjerljivo rješenje kojeg se mogu sjetiti je korištenje složenih DIV-ova umjesto tablice i forsiranje prijeloma stranica ako je potrebno... ali prije nego što prođem kroz sve promjene mislio sam da bih mogao pitati ovdje ranije.

Koristite ova CSS svojstva:

Prijelom stranice nakon prijeloma stranice prije

Na primjer:

@media print ( tablica (prijelom stranice-nakon:uvijek)) ....

Nijedan od odgovora ovdje nije radio za mene u Chromeu. AAverin na GitHubu stvorio je koristan Javascript za ovo i radio je za mene:

Samo dodajte js u svoj kod i dodajte klasu splitForPrint u tablicu i ona će uredno podijeliti tablicu na više stranica i dodati zaglavlje tablice svakoj stranici.

Napomena: Kada koristite prijelom stranice: uvijek za oznaku, stvara se prijelom stranice nakon zadnjeg bita tablice, stvarajući svaki put potpuno praznu stranicu! Da biste to popravili, jednostavno ga promijenite u page-break-after: auto. Ispravno će se pokvariti i neće stvoriti dodatnu praznu stranicu.

@media print ( table ( page-break-after:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) td ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group ) ) ....

Prihvaćeni odgovor nije radio za mene u svim preglednicima, ali praćenje css-a mi je radilo:

Tr ( display: table-row-group; page-break-inside:avoid; page-break-after:auto; )

HTML struktura je bila:

...

U mom slučaju bilo je nekih dodatnih problema s thead tr, ali ovo je riješilo izvorni problem zadržavanja retka tablice.

Zbog problema s zaglavljem dobio sam:

#theTable td * ( page-break-inside:avoid; )

Ovo nije spriječilo pucanje redova; samo sadržaj svake ćelije.

Završio sam s pristupom @vicenteherrera, s nekim izmjenama (što bi moglo biti bootstrap 3).

U osnovi; ne možemo razbiti tr s ili td jer oni nisu elementi na razini bloka. Stoga umetnemo div u svaki i primijenimo naša pravila prijeloma stranice* na div. Drugo, dodajemo malo ispune na vrh svakog od ovih divova kako bismo nadoknadili sve stilske artefakte.

@media print ( /* izbjegavajte rezanje tr"ova na pola */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zamotajte svaki tr i td" sadržaj unutar div // (todo: dodajte logiku tako da ovo radimo samo pri ispisu) $("table tbody th, table tbody td").wrapInner(" " ); ))

Ispravci i prilagodbe dodataka bili su nužni kako bi se nadoknadilo nešto podrhtavanja koje je uvedeno (iz bootstrapa, pretpostavljam). Nisam siguran predstavljam li novo rješenje iz ostalih odgovora na ovo pitanje, ali možda nekome pomogne.

Nedavno sam riješio ovaj problem dobrim rješenjem.

AvoidBreak ( border: 2px solid; page-break-inside:avoid; )

Funkcija Print())( $(".tableToPrint td, .tableToPrint th").each(function())( $(this).css("width", $(this).width() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Djeluje kao šarm!

Testirao sam mnoga rješenja i nijedno nije dobro funkcioniralo.

Pa sam probao mali trik i djeluje:

tfoot sa stilom: položaj: fiksan; dolje: 0px; položaj: fiksni; dolje: 0px; nalazi se na dnu zadnje stranice, ali ako je podnožje previsoko, preklapa sadržaj tablice.

tfoot samo s: display: table-footer-group; ne preklapa se, ali nije na dnu zadnje stranice...

Stavimo dvije tfoot:

TFOOT.placer ( display: table-footer-group; visina: 130px; ) TFOOT.contenter ( display: table-footer-group; pozicija: fiksna; bottom: 0px; height: 130px; ) vaš dugi tekst ili visoka slika ovdje

Jedan rezervira prostor na nezadnjim stranicama, a drugi u vašem osobnom podnožju.

Testna tablica ( page-break-inside:auto ) tr ( page-break-inside:avoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

naslov

bilješke

x

x

x

Ovaj me tweet zapeo. Odjednom sam shvatio da se više ne mogu sjetiti kada sam optimizirao web stranice za ispis ili čak provjerio kako su ispisane na pisač.

Glavni fokus web razvoja je na elektronske verzije stranice. Stranice se moraju provjeravati u više preglednika, testirati na različitim veličinama prozora... Koga briga za pisače? Ili sam možda zaboravio na stilove ispisa jer rijetko sam izrađujem papirnate kopije stranica. Bilo kako bilo, osjećao sam da se situacija hitno mora popraviti.

Tiskana verzija web stranice ima jednako pravo na postojanje kao i elektronička verzija. I, ako nastojimo naše materijale učiniti što dostupnijima, ne bismo smjeli zanemariti papirnate medije. Osim toga, ne biste trebali stvarati pretpostavke o korisnicima i njihovom ponašanju. Ljudi još uvijek ispisuju web stranice na pisačima. Sjetite se samo članaka ili postova na blogu, stranica s receptima, kontakt podataka, uputa ili popisa. Prije ili kasnije netko će sigurno pokušati isprintati nešto što ste vi objavili na internetu.

Evo što o tome kaže Haydon Pickering, autor knjige “Inclusive Design Patterns”: “Već dugo nisam koristio kućne pisače. Stvar je u tome što imam osjećaj da se pokvare desetak minuta nakon što počnete ispisivati. Ali ja nisam sve.”

Ako ste sada shvatili da, poput mene, niste obraćali dovoljno pažnje na stilove tiska, nadam se da će vam moja priča dobro poslužiti i pomoći vam da brzo osvježite pamćenje. A ako nikada niste optimizirali web stranice za pisače, moja mala zbirka korisnih CSS trikova pomoći će vam da počnete.

1. Korištenje CSS stilova ispisa Najbolji način za uključivanje stilova ispisa u vašu stranicu je deklaracija @media pravila u vašoj glavnoj CSS datoteci.

Tijelo (veličina fonta: 18px; ) @media print ( /* stilovi ispisa će ići ovdje */ tijelo (veličina fonta: 28px; ) )
Alternativno, stilove ispisa možete staviti u zasebnu datoteku i uključiti je u HTML, ali uz ovaj pristup trebat će vam dodatni zahtjev prilikom učitavanja stranice.

2. Testiranje Kako ocjenjivati izgled web stranica pripremljena za ispis? Svakome je jasno da stavljanje na papir nakon svake promjene stila nije Najbolja odluka. Srećom, mogućnosti preglednika sasvim su dovoljne za “bezpapirnu” provjeru ispisanih verzija stranica.

Ovisno o pregledniku, možete izvesti stranicu u PDF, upotrijebite funkciju pretpregled ili čak otklonite pogreške na stranici izravno u web pregledniku.

Za otklanjanje pogrešaka u stilovima ispisa u Firefoxu otvorite ploču za razvojne programere pomoću tipkovničke prečice Shift + F2 ili izvršavanjem naredbe izbornika Razvoj → Ploča za razvojne programere. Uđi naredbeni redak koji se nalazi na dnu prozora, sljedeće: media emulate print , dovršavanje unosa pritiskom na Enter . Aktivna kartica ponašat će se kao da se njezina vrsta medija ispisuje dok ne zatvorite ili osvježite stranicu.

Emulacija ispisa u Firefoxu

Chrome također ima sličnu značajku. Otvorite Developer Tools, za što na MacOS-u možete koristiti kombinaciju tipki CMD + Opt + I, na Windowsu – Ctrl + Shift + I ili izvršiti naredbu izbornika Dodatni alati→ Alati za razvojne programere. Nakon toga otvorite ploču za renderiranje. Jedan od načina da to učinite je da pritisnete Esc da biste otvorili ploču konzole, a zatim upotrijebite izbornik da biste otvorili ploču iscrtavanja. Na ploči za renderiranje postavite oznaku Emulate CSS Media i odaberite Print.

Emulacija ispisa u Chromeu

Više o testiranju tiskanih verzija web stranica možete pročitati na StackOverflowu.

3. Apsolutne mjerne jedinice Apsolutne mjerne jedinice nisu baš prikladne za ekranske verzije stranica, ali za ispis su upravo ono što vam treba. U stilovima tiska potpuno je siguran, štoviše, preporučuje se korištenje apsolutnih mjernih jedinica, poput cm, mm, in, pt ili pc.

Odjeljak ( margina-dno: 2cm; )

4. Svojstva stranice Možete koristiti pravilo @page za kontrolu svojstava stranice, kao što su veličina, orijentacija i margine. Ovo je vrlo zgodno, recimo, kada trebate da sve ispisane stranice imaju iste margine.

@media print ( @stranica ( margina: 1cm; ) )
Pravilo @page dio je standarda Paged Media Module, koji nudi mnogo zanimljivih stvari poput odabira prve stranice za ispis, prilagodbe prazne stranice, postavljanje elemenata u kutove stranice i . Može se koristiti čak i za pripremu knjiga za tisak.

5. Upravljanje prijelomima stranica Budući da ispisani listovi, za razliku od web stranica, nisu beskonačni, sadržaj web stranica se prije ili kasnije prekine na jednom listu papira i nastavi na sljedećem. Postoji pet svojstava za kontrolu prijeloma stranice: Prijelom stranice prije elementa Ako želite da se element uvijek pojavljuje na početku stranice, možete forsirati prijelom stranice prije njega pomoću svojstva page-break-before.

Odjeljak ( prijelom stranice prije: uvijek; )

▍Prijelom stranice nakon elementa Svojstvo page-break-after omogućuje vam postavljanje prisilnog prijeloma stranice nakon elementa. Koristeći ovo svojstvo, također možete spriječiti lomljenje.

H2 ( prijelom stranice nakon: uvijek; )

▍Prelom stranice unutar elementa Svojstvo page-break-inside vrlo je korisno ako trebate izbjeći dijeljenje elementa između dvije stranice.

Ul ( prijelom stranice: izbjeći; )

▍Gornji i donji viseći redovi Ponekad ne morate prisilno stavljati prijelome stranica, ali želite kontrolirati izlaz odlomaka na granicama stranice.

Na primjer, ako zadnji redak odlomka na trenutnoj stranici ne stane, posljednja dva retka tog odlomka bit će ispisana na sljedećoj stranici. To je zato što je svojstvo koje ovo kontrolira (udovice, tj. "gornji viseći redovi") prema zadanim postavkama postavljeno na 2. To se može promijeniti.

P ( udovice: 4; )
Ako se dogodi druga situacija i samo jedan redak odlomka stane na trenutnu stranicu, cijeli će se odlomak ispisati na sljedećoj stranici. Svojstvo odgovorno za donje viseće linije (siročići) također je postavljeno na 2 prema zadanim postavkama.

P(siročića: 3;)
Poanta gornjeg koda je da kako cijeli odlomak ne bi prešao na sljedeću stranicu, najmanje tri retka moraju stati na trenutnu stranicu.

Da biste ovo bolje razumjeli, pogledajte primjer pripremljen pomoću CodePen-a. A ovdje je verzija za otklanjanje pogrešaka istog primjera, praktičnija je za testiranje.

*, *:prije, *:poslije, *:prvo-slovo, p:prvi-redak, div:prvi-redak, blockquote:prvi-redak, li:prvi-redak ( pozadina: prozirna !važno; boja: #000 !važno; box-shadow: ništa !važno; text-shadow: ništa !važno; )
Usput, CSS stilovi za ispis jedan su od rijetkih izuzetaka gdje je direktiva!important apsolutno normalna ;)

7. Uklanjanje nepotrebnog sadržaja Kako ne biste trošili tintu, trebali biste ukloniti sve nepotrebno s ispisane verzije stranice, poput ogromnih lijepih slajdova, reklama, alata za navigaciju stranicama i slično. To se može učiniti postavljanjem svojstva prikaza na ništa za nepotrebne elemente. Vrlo je moguće da ćete smatrati ispravnim prikazati samo glavni sadržaj stranice i sakriti sve ostalo:

Tijelo > *:not(main) ( prikaz: ništa; )

8. Prikaz adresa poveznica Linkovi, kakvi se obično nalaze na web stranicama, potpuno su beskorisni kada su ispisani, osim ako čitatelj papirnate verzije dokumenta ne zna kamo vode.

Kako biste prikazali adrese veza nakon njihovih tekstualnih prikaza, samo koristite sljedeći stil:

A:nakon ( sadržaj: " (" attr(href) ")"; )
Naravno, ovakvim pristupom puno će se nepotrebnih stvari "dešifrirati". Na primjer, relativne veze, apsolutne veze na istoj stranici kao i ispisana stranica, veze sidra, i tako dalje. Kako ne biste zatrpali ispisanu stranicu, bilo bi bolje koristiti nešto poput ovoga:

A:not():after ( sadržaj: " (" attr(href) ")"; )
Izgleda ludo, naravno. Pa ću objasniti značenje ovog pravila na običnom engleskom: "Prikaži vrijednost atributa href pored svake veze koja ima atribut koji počinje s http, ali ne sadrži mywebsite.com."

9. Objašnjenje kratica Kratice u tekstu moraju biti postavljene u tag, a njihova objašnjenja moraju biti uključena u atribut naslova. Ako kratice formatirate na ovaj način, njihovo je značenje vrlo lako prikazati na ispisanoj stranici:

Abbr:after ( content: " (" attr(title) ")"; )

10. Prisilni ispis pozadine Obično preglednici, kada kreiraju stranicu za ispis, ne prikazuju boju pozadine i pozadinske slike, osim ako to izričito ne naznače. Ipak, ponekad sve to treba isprintati. Ovdje će nam pomoći nestandardizirano svojstvo print-color-adjust, koje vam omogućuje nadjačavanje zadanih postavki za neke preglednike.

Zaglavlje ( -webkit-print-color-adjust: točno; print-color-adjust: točno; )

11. Medijski upiti Ako pišete medijske upite poput ovog ispod, imajte na umu da CSS pravila u slične zahtjeve neće utjecati na ispisanu verziju stranice.

@medijski zaslon i (min. širina: 48em) ( /* samo zaslon */ )
Zašto je to tako? Stvar je u tome što se CSS pravila primjenjuju samo ako je minimalna vrijednost širine 48em i ako je vrsta medija screen. Ako se riješite ovog medijskog upita iz ključna riječ zaslon, tada će biti ograničen samo vrijednošću minimalne širine.

@media (min-width: 48em) ( /* sve vrste medija */ )

12. Ispis karata Trenutne verzije Firefoxa i Chromea mogu ispisivati ​​karte, ali npr. Safari to ne može. Što učiniti pri ispisu kartica? Jedna od univerzalnih opcija je korištenje statičkih karata umjesto dinamičkih.

Karta ( širina: 400px; visina: 300px; pozadinska slika: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: točno; print-color-adjust: točno; )

13. QR kodovi Ispis QR kodova koji sadrže važne poveznice može značajno poboljšati upotrebljivost papirnatih verzija web stranica. Ovdje je članak iz časopisa The Smashing Magazine gdje možete pronaći korisni savjeti o ovoj temi. Jedan od njih je uključivanje njihovih adresa u obliku QR kodova na ispisane stranice. Zbog toga korisnik, da bi u pregledniku otvorio stranicu s koje je ispis napravljen, neće morati tipkati njezinu punu adresu na tipkovnici.14. O ispisu neoptimiziranih stranica Dok sam istraživao temu o ispisu web stranica, otkrio sam odličan alat, koji vam omogućuje prikladnu pripremu neoptimiziranih stranica za ispis. Korištenje Printliminatora