Ako sa vysporiadať s prerušeniami strán pri tlači veľkej tabuľky HTML (8)

Mám projekt, ktorý vyžaduje tlač tabuľky HTML s mnohými riadkami.

Môj problém je v tom, ako je tabuľka vytlačená na viacerých stranách. Niekedy prereže riadok na polovicu, takže je nečitateľný, pretože jedna polovica je na okraji strany a zvyšok je vytlačený v hornej časti ďalšej strany.

Jediné prijateľné riešenie, ktoré ma napadá, je použiť zložité DIV namiesto tabuľky a v prípade potreby vynútiť zalomenie strán... ale predtým, ako prejdem všetkými zmenami, som si myslel, že by som sa tu mohol opýtať skôr.

Použite tieto vlastnosti CSS:

Strana-zalomenie-za-zalomenie-pred

Napríklad:

@media print ( table (page-break-after:always) ) ....

Žiadna z odpovedí tu pre mňa v prehliadači Chrome nefungovala. AAverin na GitHub na to vytvoril užitočný Javascript a fungovalo to pre mňa:

Stačí pridať js do svojho kódu a pridať triedu splitForPrint do tabuľky a tabuľka sa úhľadne rozdelí na viacero stránok a na každú stránku pridá hlavičku tabuľky.

Poznámka: Pri použití zlomu strany: vždy pre značku vytvorí zlom strany za posledným bitom tabuľky, čím sa zakaždým vytvorí úplne prázdna strana! Ak to chcete vyriešiť, jednoducho ho zmeňte na zalomenie strany: auto. Správne sa zlomí a nevytvorí ďalšiu prázdnu stránku.

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

Prijatá odpoveď pre mňa nefungovala vo všetkých prehliadačoch, ale podľa css mi fungovalo:

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

HTML štruktúra bol:

...

V mojom prípade sa vyskytli ďalšie problémy s thead tr , ale to vyriešilo pôvodný problém zadržiavania riadkov tabuľky.

Kvôli problémom s hlavičkou som skončil s:

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

To nezabránilo lámaniu riadkov; iba obsah každej bunky.

Skončil som s prístupom @vicenteherrera s niekoľkými vylepšeniami (čo môže byť bootstrap 3).

V podstate; nemôžeme zlomiť tr s alebo td s, pretože to nie sú prvky na úrovni bloku. Do každého teda vložíme div s a na divy aplikujeme naše pravidlá zalomenia stránky*. Po druhé, na vrch každého z týchto divov pridáme nejaké vypchávky, aby sme kompenzovali akékoľvek štýlové artefakty.

@media print ( /* vyhnite sa orezaniu tr"s na polovicu */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zabalenie každého obsahu tr a td do prvku div // (todo: pridajte logiku, takže to urobíme len pri tlači) $("table tbody th, table tbody td").wrapInner(" ");))

Opravy a úpravy prídavkov boli potrebné na kompenzáciu určitého chvenia, ktoré bolo zavedené (predpokladám z bootstrapu). Nie som si istý, či uvádzam nové riešenie z ostatných odpovedí na túto otázku, ale možno to niekomu pomôže.

Nedávno som tento problém vyriešil dobrým riešením.

AvoidBreak ( orámovanie: 2px plné; page-break-inside:avoid; )

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

Funguje ako kúzlo!

Testoval som veľa riešení a žiadne nefungovalo dobre.

Tak som skúsil malý trik a funguje to:

chodidlo so štýlom: poloha: pevná; dole: 0px; poloha: pevná; dole: 0px; je umiestnený v spodnej časti poslednej strany, ale ak je päta príliš vysoká, prekrýva obsah tabuľky.

tfoot only with: display: table-footer-group; neprekrýva sa, ale nie je na konci poslednej strany...

Položme dve nohy:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) tu je váš dlhý text alebo vysoký obrázok

Jedna si vyhradzuje miesto na iných stranách, druhá vo vašej osobnej päte.

Testovacia tabuľka ( page-break-inside:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

nadpis

poznámky

X

X

X

Ako sa vysporiadať s prerušeniami strán pri tlači veľkej tabuľky HTML (8)

Mám projekt, ktorý vyžaduje tlač tabuľky HTML s mnohými riadkami.

Môj problém je v tom, ako je tabuľka vytlačená na viacerých stranách. Niekedy prereže riadok na polovicu, takže je nečitateľný, pretože jedna polovica je na okraji strany a zvyšok je vytlačený v hornej časti ďalšej strany.

Jediné prijateľné riešenie, ktoré ma napadá, je použiť zložité DIV namiesto tabuľky a v prípade potreby vynútiť zalomenie strán... ale predtým, ako prejdem všetkými zmenami, som si myslel, že by som sa tu mohol opýtať skôr.

Použite tieto vlastnosti CSS:

Strana-zalomenie-za-zalomenie-pred

Napríklad:

@media print ( table (page-break-after:always) ) ....

Žiadna z odpovedí tu pre mňa v prehliadači Chrome nefungovala. AAverin na GitHub na to vytvoril užitočný Javascript a fungovalo to pre mňa:

Stačí pridať js do svojho kódu a pridať triedu splitForPrint do tabuľky a tabuľka sa úhľadne rozdelí na viacero stránok a na každú stránku pridá hlavičku tabuľky.

Poznámka: Pri použití zlomu strany: vždy pre značku vytvorí zlom strany za posledným bitom tabuľky, čím sa zakaždým vytvorí úplne prázdna strana! Ak to chcete vyriešiť, jednoducho ho zmeňte na zalomenie strany: auto. Správne sa zlomí a nevytvorí ďalšiu prázdnu stránku.

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

Prijatá odpoveď pre mňa nefungovala vo všetkých prehliadačoch, ale podľa css mi fungovalo:

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

Štruktúra html bola:

...

V mojom prípade sa vyskytli ďalšie problémy s thead tr , ale to vyriešilo pôvodný problém zadržiavania riadkov tabuľky.

Kvôli problémom s hlavičkou som skončil s:

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

To nezabránilo lámaniu riadkov; iba obsah každej bunky.

Skončil som s prístupom @vicenteherrera s niekoľkými vylepšeniami (čo môže byť bootstrap 3).

V podstate; nemôžeme zlomiť tr s alebo td s, pretože to nie sú prvky na úrovni bloku. Do každého teda vložíme div s a na divy aplikujeme naše pravidlá zalomenia stránky*. Po druhé, na vrch každého z týchto divov pridáme nejaké vypchávky, aby sme kompenzovali akékoľvek štýlové artefakty.

@media print ( /* vyhnite sa orezaniu tr"s na polovicu */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (function())( // Zabalenie každého obsahu tr a td do prvku div // (todo: pridajte logiku, takže to urobíme len pri tlači) $("table tbody th, table tbody td").wrapInner(" ");))

Opravy a úpravy prídavkov boli potrebné na kompenzáciu určitého chvenia, ktoré bolo zavedené (predpokladám z bootstrapu). Nie som si istý, či uvádzam nové riešenie z ostatných odpovedí na túto otázku, ale možno to niekomu pomôže.

Nedávno som tento problém vyriešil dobrým riešením.

AvoidBreak ( orámovanie: 2px plné; page-break-inside:avoid; )

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

Funguje ako kúzlo!

Testoval som veľa riešení a žiadne nefungovalo dobre.

Tak som skúsil malý trik a funguje to:

chodidlo so štýlom: poloha: pevná; dole: 0px; poloha: pevná; dole: 0px; je umiestnený v spodnej časti poslednej strany, ale ak je päta príliš vysoká, prekrýva obsah tabuľky.

tfoot only with: display: table-footer-group; neprekrýva sa, ale nie je na konci poslednej strany...

Položme dve nohy:

TFOOT.placer ( display: table-footer-group; height: 130px; ) TFOOT.contenter ( display: table-footer-group; position: fixed; bottom: 0px; height: 130px; ) tu je váš dlhý text alebo vysoký obrázok

Jedna si vyhradzuje miesto na iných stranách, druhá vo vašej osobnej päte.

Testovacia tabuľka ( page-break-inside:auto ) tr ( page-break-inside:varoid; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

nadpis

poznámky

X

X

X

Tento tweet ma zaujal. Zrazu som si uvedomil, že si už nepamätám, kedy som optimalizoval webové stránky na tlač alebo dokonca skontroloval, ako boli vytlačené na tlačiarni.

Hlavným zameraním vývoja webu je elektronické verzie stránky. Stránky sa musia kontrolovať vo viacerých prehliadačoch, testovať na rôznych veľkostiach okien... Koho zaujímajú tlačiarne? Alebo som možno zabudol na štýly tlače, pretože len zriedka robím papierové kópie stránok. Nech je to akokoľvek, cítil som, že situáciu treba urgentne napraviť.

Tlačená verzia webovej stránky má rovnaké právo na existenciu ako elektronická verzia. A ak sa snažíme, aby boli naše materiály čo najprístupnejšie, nemali by sme zanedbávať papierové médiá. Okrem toho by ste nemali robiť predpoklady o používateľoch a ich správaní. Ľudia stále tlačia webové stránky na tlačiarňach. Len si spomeňte na články alebo blogové príspevky, stránky s receptami, kontaktné informácie, pokyny alebo zoznamy. Skôr či neskôr sa určite niekto pokúsi vytlačiť niečo, čo ste zverejnili na internete.

Tu je to, čo o tom hovorí Haydon Pickering, autor knihy „Inclusive Design Patterns“: „Už dlho nepoužívam domáce tlačiarne. Ide o to, že mám pocit, že sa rozbijú asi desať minút po spustení tlače. Ale nie som všetko."

Ak si teraz uvedomíte, že tak ako ja ste nevenovali dostatočnú pozornosť štýlom tlače, dúfam, že vám môj príbeh dobre poslúži a pomôže vám rýchlo osviežiť pamäť. A ak ste nikdy neoptimalizovali webové stránky pre tlačiarne, moja malá zbierka užitočných CSS trikov vám pomôže začať.

1. Používanie štýlov tlače CSS Najlepší spôsob, ako začleniť štýly tlače do vašej stránky, je deklarovať pravidlo @media v hlavnom súbore CSS.

Body ( font-size: 18px; ) @media print ( /* štýly tlače budú tu */ body ( font-size: 28px; ) )
Alternatívne môžete štýly tlače vložiť do samostatného súboru a zahrnúť ho do HTML, ale pri tomto prístupe budete pri načítaní stránky potrebovať dodatočnú požiadavku.

2. Testovanie Ako hodnotiť vzhľad webová stránka pripravená na tlač? Každému je jasné, že dať to na papier po každej zmene štýlu nie Najlepšie rozhodnutie. Našťastie možnosti prehliadača úplne postačujú na „bezpapierovú“ kontrolu tlačených verzií stránok.

V závislosti od prehliadača môžete exportovať stránku do PDF, použite funkciu Náhľad alebo dokonca odladiť stránku priamo vo webovom prehliadači.

Ak chcete ladiť štýly tlače vo Firefoxe, otvorte panel vývojára pomocou klávesovej skratky Shift + F2 alebo spustením príkazu ponuky Develop → Developer Panel. Vstúpte príkazový riadok v spodnej časti okna: media emulate print , zadanie dokončite stlačením klávesu Enter . Aktívna karta sa bude správať tak, ako keby sa jej typ média tlačil, kým nezatvoríte alebo neobnovíte stránku.

Emulácia tlače vo Firefoxe

Podobnú funkciu má aj Chrome. Otvorte nástroje pre vývojárov, pre ktoré v systéme MacOS môžete použiť kombináciu klávesov CMD + Opt + I, v systéme Windows - Ctrl + Shift + I alebo spustiť príkaz ponuky Ďalšie nástroje→ Vývojárske nástroje. Potom otvorte panel vykresľovania. Jedným zo spôsobov, ako to urobiť, je stlačením klávesu Esc vyvolať panel Konzola a potom pomocou ponuky otvoriť panel Rendering. Na paneli vykresľovania nastavte príznak Emulate CSS Media a vyberte Print.

Emulácia tlače v prehliadači Chrome

Viac o testovaní tlačených verzií webových stránok si môžete prečítať na StackOverflow.

3. Absolútne merné jednotky Absolútne merné jednotky nie sú veľmi vhodné pre obrazovkové verzie stránok, ale pre tlač sú presne to, čo potrebujete. V štýloch tlače je to úplne bezpečné, navyše sa odporúča používať absolútne jednotky merania, ako cm, mm, in, pt alebo pc.

Sekcia ( okraj-dolný okraj: 2 cm; )

4. Vlastnosti strany Pravidlo @page môžete použiť na ovládanie vlastností strany, ako je jej veľkosť, orientácia a okraje. To je veľmi užitočné, povedzme, keď potrebujete, aby všetky vytlačené strany mali rovnaké okraje.

@media print ( @page (okraj: 1 cm; ) )
Pravidlo @page je súčasťou štandardu Paged Media Module, ktorý ponúka množstvo skvelých vecí, ako je výber prvej strany na tlač, prispôsobenie prázdne strany, polohovacie prvky v rohoch stránky a . Dá sa dokonca použiť na prípravu kníh na tlač.

5. Správa zlomov strán Keďže vytlačené listy na rozdiel od webových stránok nie sú nekonečné, obsah webových stránok sa skôr či neskôr odlomí na jeden list papiera a pokračuje na ďalšom. Existuje päť vlastností na ovládanie zlomov strán: Zalomenie strany pred prvkom Ak chcete, aby sa prvok vždy objavil na začiatku strany, môžete pred ním vynútiť zalomenie strany pomocou vlastnosti zlom strany-pred.

Sekcia ( zalomenie strany-pred: vždy; )

▍Zalomenie strany po prvku Vlastnosť zalomenia strany po prvku vám umožňuje nastaviť vynútený koniec strany po prvku. Pomocou tejto vlastnosti môžete tiež zabrániť rozbitiu.

H2 ( zalomenie strany: vždy; )

▍Zlomenie stránky vo vnútri prvku Vlastnosť page-break-inside je veľmi užitočná, ak sa potrebujete vyhnúť rozdeleniu prvku medzi dve strany.

Ul ( page-break-inside: avoid; )

▍Horné a spodné visiace riadky Niekedy nie je potrebné vynútiť zalomenie strán, ale chcete ovládať výstup odsekov na hraniciach strán.

Ak sa napríklad posledný riadok odseku na aktuálnej strane nezmestí, posledné dva riadky tohto odseku sa vytlačia na ďalšiu stranu. Je to preto, že vlastnosť, ktorá to riadi (vdovy, t. j. „horné visiace riadky“), je predvolene nastavená na 2. Toto je možné zmeniť.

P (vdovy: 4; )
Ak nastane iná situácia a na aktuálnu stranu sa zmestí iba jeden riadok odseku, celý odsek sa vytlačí na ďalšiu stranu. Vlastnosť zodpovedná za spodné závesné čiary (siroty) je tiež štandardne nastavená na 2.

P(siroty: 3;)
Pointou vyššie uvedeného kódu je, že aby sa celý odsek nezalomil na ďalšiu stranu, musia sa na aktuálnu stranu zmestiť aspoň tri riadky.

Aby ste tomu lepšie porozumeli, pozrite si príklad pripravený pomocou CodePen. A tu je ladiaca verzia toho istého príkladu, je pohodlnejšie otestovať.

*, *:pred, *:po, *:prvé-písmeno, p:prvý riadok, div:prvý riadok, blockquote:prvý riadok, li:prvý riadok ( pozadie: priehľadné !dôležité; farba: #000 !important; box-shadow: žiadne !important; text-shadow: žiadne !important; )
Mimochodom, CSS štýly pre tlač sú jednou z mála výnimiek, kde je direktíva!important úplne normálna ;)

7. Odstránenie nepotrebného obsahu Aby ste neplytvali atramentom, mali by ste z tlačenej verzie stránky odstrániť všetko nepotrebné, ako sú obrovské krásne diapozitívy, reklama, navigačné nástroje na stránke a podobne. Dá sa to dosiahnuť nastavením vlastnosti display na hodnotu none pre nepotrebné prvky. Je celkom možné, že zistíte, že je správne zobraziť iba hlavný obsah stránky a skryť všetko ostatné:

Telo > *:nie (hlavné) (zobrazenie: žiadne; )

8. Zobrazovanie adries odkazov Odkazy, ako sa zvyčajne nachádzajú na webových stránkach, sú pri tlači úplne zbytočné, pokiaľ čitateľ papierovej verzie dokumentu nevie, kam vedú.

Ak chcete zobraziť adresy odkazov po ich textových reprezentáciách, použite nasledujúci štýl:

A:after ( content: " (" attr(href) ")"; )
S týmto prístupom sa, samozrejme, „rozlúšti“ veľa nepotrebných vecí. Napríklad relatívne odkazy, absolútne odkazy na tej istej stránke ako vytlačená stránka, kotviace odkazy atď. Aby nedošlo k preplneniu tlačenej stránky, bolo by lepšie použiť niečo takéto:

A:not():after ( content: " (" attr(href) ")"; )
Vyzerá to šialene, samozrejme. Takže vysvetlím význam tohto pravidla v jednoduchej angličtine: "Zobrazte hodnotu atribútu href vedľa každého odkazu, ktorý má atribút začínajúci na http, ale neobsahuje mywebsite.com."

9. Vysvetlivky skratiek Skratky v texte musia byť umiestnené v tagu a ich vysvetlivky musia byť zahrnuté v atribúte title. Ak skratky naformátujete týmto spôsobom, ich význam sa veľmi ľahko zobrazí na tlačenej stránke:

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

10. Nútená tlač pozadia Obyčajne prehliadače pri vytváraní stránky na tlač nezobrazujú farbu pozadia a obrázky na pozadí, pokiaľ to výslovne neuvádzajú. Toto všetko však niekedy treba vytlačiť. Tu nám pomôže neštandardizovaná vlastnosť print-color-adjust, ktorá umožňuje prepísať predvolené nastavenia pre niektoré prehliadače.

Hlavička ( -webkit-print-color-upraviť: presná; tlač-upraviť farbu: presne; )

11. Dotazy na médiá Ak píšete dopyty na médiá, ako je ten nižšie, majte na pamäti, že pravidlá CSS podobné žiadosti neovplyvní tlačenú verziu stránky.

@media obrazovka a (min. šírka: 48em) ( /* iba obrazovka */ )
prečo je to tak? Ide o to, že pravidlá CSS sa aplikujú iba vtedy, ak je hodnota min-width 48 em a ak je typ média screen . Ak sa zbavíte tohto mediálneho dopytu z kľúčové slovo screen , potom bude obmedzená iba hodnotou min-width.

@media (min-width: 48em) ( /* všetky typy médií */ )

12. Tlač máp Aktuálne verzie prehliadačov Firefox a Chrome dokážu tlačiť mapy, ale napríklad Safari to nedokáže. Čo robiť pri tlači kariet? Jednou z univerzálnych možností je použitie statických máp namiesto dynamických.

Mapa ( šírka: 400px; výška: 300px; obrázok na pozadí: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh "); -webkit-print-color-uprav: presný; print-color-uprav: presný; )

13. QR kódy Tlač QR kódov obsahujúcich dôležité odkazy môže výrazne zlepšiť použiteľnosť papierových verzií webových stránok. Tu je kúsok z časopisu The Smashing Magazine, kde nájdete užitočné rady o tejto téme. Jedným z nich je uvádzanie ich adries vo forme QR kódov na tlačených stránkach. Výsledkom je, že používateľ na to, aby v prehliadači otvoril stránku, z ktorej bol výtlačok vytvorený, nebude musieť zadávať jej celú adresu na klávesnici.14. O tlači neoptimalizovaných stránok Pri skúmaní témy tlače webových stránok som zistil skvelý nástroj, ktorá umožňuje pohodlne pripraviť neoptimalizované strany na tlač. Použitie Printliminator