page-break-inside tabulka

IE tuto funkci nepodporuje, zkousim to na Opera a FireFox, ale marne, ty by to mely podporovat

Dlouhé hodiny jsem se s tímhle také trápil: Jak tisknout tabulku, aby se stránky lámaly mezi řádky a ne uvnitř.
Nakonec jsem přišel na tohle řešení. V IE nefunguje z několika důvodů, ale v opeře jde bez problémů (FF jsem netestoval).

Podle CSS page-break-inside nefunguje na tabulky, jen bloky. Je tedy nutné místo tabulky použít divy. Jeden pro tabulku (i když není nutný), další pro jednotlivé řádky (ty jsou klíčové). Pro buňky je pak možno použít jakýkoliv prvek (div je nejlepší, protože nemá margin ani nic jiného).

Tabulka může vypadat třeba takhle:

<div class="table">

  <div class="table-row"><div>Několika<br><br><br><br>řádkový<br><br><br><br> text</div><div>a druhý sloupec</div></div>

  <!-- řádku 10x - 20x zopakujte aby to zabralo pár stránek -->

  <div class="table-row"><div>Několika<br><br><br><br>řádkový<br><br><br><br> text</div><div>a druhý sloupec</div></div>

</div>

V css se pak u divů table a table-row ponechá {display:block;}. U buňek se nastaví {display: table-cell;} - tím se bloky začnou řadit za sebe a vznikne dojem tabulky (stejný efekt v opeře má {display:inline-block;}, ale na to už nefunguje page-break-inside). Ještě je dobré buňkám nastavit šířku, aby vyplnily celý řádek (procenta ale nelze z nějakého důvodu použít - na A4 je nejlepší nastavit šířku tabulky na 19cm a buňky pak rozpočítat).

Poslední nutný krok je nastavit řádce buňky, jak se má řádkovat - tedy uvnitř ne, před/za automaticky: {page-break-inside: avoid;page-break-before: auto;page-break-after: auto;}

Celé css tedy vypadá:

/*    div.table, div.table-row {display:block} */

    div.table-row {page-break-inside: avoid;page-break-before: auto;page-break-after: auto;}

    div.table-row div {display: table-cell;} 

Pro správné stránkování je nutné zachovat pravidla z css - uvnitř buněk tabulky se mohou vyskytovat pouze bloky nebo inline prvky - jakékoliv jiné prvky správné stránkování zruší.
Také není vhodné používat pozicování, protože vše, co je absolutě nebo fixně umístěné, se zobrazí absolutně na první resp. všech stránkách (prostě to z buňky vyskočí). Samostatné řádky nebo buňky nesmějí být pozicované vůbec! Pozicování celé tabulky jsem ani nezkoušel.
Floatování také stránkování ruší.

nothrem

Nic ve zlém, ale používat pro výpis tabulkových dat DIVy je poměrně slušná ptákovina. Pročež všem doporučuji, aby zmíněné řešení brali jako podivuhodnou perličku, v žádném případě ho nepoužívali a smířili se s tím, že IE si prostě vytiskne tabulku tak, jak uzná za vhodné.

Já to taky nepsal s úmyslem, aby se odteď místo tabulek používaly divy - to je nesmysl.

Šlo o to dát návod těm, kteří prostě potřebují udělat správné stránkování - třeba tam, kde se řádky rozstřihávají na pozvánky, samolepky apod. a tudíž je nepřípustné mít jednu řádku rozdělenou na více stránkách.

Jde spíše o to, použít to tam, kde bylo tabulky použito jen pro správné rozložení dat při tisku.

třeba tam, kde se řádky rozstřihávají na pozvánky, samolepky apod.

pak bych z zvolil nějaký jiný formát, který je vhodnější pro tisk než html (třeba pdf)

1. pdf je mnohokrát větší než html (co má v html 50kB tak v pdf nebude mít míň než 1MB)
2. v html se kromě výše popsaného nemusím starat, kde to zalomit
3. pdf se musí generovat z něčeho složitějšího (postscript, word, ...) - html napíšeš v notepadu.

HTML bych řek, že je pro tisk to nejvhodnější, protože, když se to na stránku nevejde (na šířku i na výšku), tak se to zalomí. Přes CSS to lze snadno a bez změn přeformátovat. Jen jde o to jak to správně nastavit a právě to jsem chtěl sdělit. Tak přestaňte kritizovat.

Já jsem nekritizoval, jen jsem namítl, že tisknout například pozvánky nebo samolepky z HTML mi připadá nesmyslné. I na alistapart.com vyšel článek o tom, že s z HTML + CSS by mohla jít vytisknout třeba knížka, ale v komentářích se k tomu nevyjadřují zrovna pochvalně http://www.alistapart.com/comments/boom/?page=1

a k vašim argumentům:
ad 1. to je nesmysl, pokud půjde o čistě vektorová data, pak pdf nebude o mnoho větší
ad 2. tam kde zalomíte stránku v pdf se to zalomí i při tisku, což v HTML nezaručíte
ad 3. pdf můžete vygenerovat víceméně z čehokoliv - pravda jsou na to potřeba sofistikovanější nástroje než notepad, ale moc bych nedal za to, že např. pro PHPko na to bude nějaká knihovna nebo tak něco

Ještě doplnění:
{Display:Table-cell} funguje, pouze pokud jsou všechny sourozenecké prvky také table-cell.
Pokud se ve stejném bloku vyskytuje prvek s jiným display (vč. Display:none), je table-cell chápáno jako block!