Hallo zusammen,
Ich möchte das Layout einer Webseite so bearbeiten, dass keine der auf ihr abgebildeten Tabellen und Überschriften durch einen Seitenumbruch getrennt werden. Auch die Tabellen in sich sollen sofern sie auf eine DINA4 Seite passen nicht getrennt werden.

In der CSS Datei habe ich diese Regel definiert, die aber nur für die Tabellen funktioniert.

@media print {
h3 {page-break-after: avoid;}
table {page-break-inside: avoid;}
}

Weil das nicht funktioniert hat, habe ich testweise einige Überschriften zusammen mit deren Tabellen in ein div gepackt und mit "<div style="page-break-inside: avoid;">" versehen, was gut funktioniert.

Bsp:
<div style="page-break-inside: avoid;">
<h3>Üerschrift</h3>
<table>
<tbody>
<tr>
<th>Datum</th>
<th>Thema</th>
</tr>
<tbody>
<table>
</div>

Ohne div würde h3 und table im pdf durch einen Seitenumbruch getrennt werden.

Nun zur Frage:
Gibt es eine Möglichkeit durch das CSS mehrere Elemente (hier <h3> und <table>) automatisch in div Container zu packen, sodass man das nicht manuell eintippen muss ?

Danke im Vorraus

Nun, Dir geht es offensichtlich um die Druckausgabe.

Da Du für den Druck sowieso eigene Anweisungen erstellen solltest/könntest , könntest du der Table display:block verpassen (page-break funktioniert regelmäßig nur bei Blocklementen), damit sollte sich ein Bruch über mehrere Seiten ebenfalls vermeiden lassen und du sparst Dir das Gefrickel mit zusätzlichen HTML-Elementen. (ich gehe mal davon aus dass es funktioniert)

Rein von der Semantik her würde ich anstelle der Überschrift (h3) hier ein caption-side nehmen. Das ist auch für Maschinen besser lesbar, bzw. zuordenbar.

caption-side: Tabellenüberschrift: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets



Zu deiner Frage übrigens: Nein

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Hi andir, vielen Dank für deine Antwort.

Obwohl ich glaube, dass table standardmäßig schon ein Blockelement ist, habe ich's mal ausprobiert.
Das Vermeiden von Seitenumrüchen innerhalb Tabellen funktioniert einwandfrei, doch leider wird die Überschrift in der Druckausgab immernoch von der Tabelle getrennt, wenn die Tabelle aufgrund der "page-break-avoid" Anweisung auf die nächste Seite rutscht (Die Überschrift steht dann auf der einen Seite, die Tabelle auf der nächsten). Der Überschrift eine" page-break-after" Anweisung zu verpassen hat in diesem Kontext keine Auswirkung.
hast du dafür noch einen Rat ?

Naja es gibt schon Unterschiede zwischen Tabellen und Block-Elementen. Tabellen erzeugen zwar auch einen Umbruch, aber sind z.B. nur so breit wie ihr Inhalt, es sei denn man ändert es im CSS. Block-Elemente dagegen nehmen halt die maximal verfügbare Breite ein.

Achso, das wusste ich nicht.
Und hast du auch ein Idee wie ich das oben beschriebene Problem, wobei die Überschriften von den Tabellen getrennt werden lösen könnte ?

Sofern Du table und h3 getrennt auszeichnest, ist mir das Verhalten schlüssig.
hast du mal über das caption-side nachgedacht/probiert?

Edit: tabellen sind weder block noch inline-Elemente, sondern was eigenes, soweit ich mich erinnere.

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte