lange Tabelle drucken mit Footer über CSS möglich?

[Marvin Esse]

Hallo,

wir drucken regelmäßig Teilnehmerlisten, die auch mal etwas länger werden können (und nicht komplett auf eine A4-Seite passen). Zudem ist jetzt gewünscht, dass auch auf jeder Seite ein Footer angezeigt wird, der den Stand des Dokuments angibt, idealerweise auch noch die Seitenzahl. Ist sowas mit CSS möglich?

Meine bisherigen Versuche sind leider gescheitert:

<style>
@media print {
	@page {
		size: A4;
		margin: 5mm;
	}
	body {
		position: relative;
	
	}
	html, body {
		margin: 0mm !important;
		height: 100%;
	}
	.tliste {
		height: 80%;
	}

	.printfooter {
		position: fixed;
		bottom: 0;
		font-size:6pt;
		line-height:6pt;
	}
}
</style>

Die Tabelle ist ein simples <table class="tliste"> mit <thead> und <tbody> "Gerappel".

Der Footer:

	<div class="printfooter">
			Teilnehmerliste<br/>
			2017-06-02<br/>
			M. Esse<br/>
	</div>

Durch das Begrenzen der Tabelle auf Höhe 80% schneide ich leider nur die Tabelle ab. Bei 100% wird beim Seitenwechsel der Header nicht nochmal angezeigt und der Footer steht auch nur auf der letzten Seite.

Lässt sich das überhaupt nur über CSS lösen oder muss ich womöglich die Anzahl der Zeilen zählen und dann manuell einen Umbruch erzwingen?

LG Marvin

[Robert B.]

Moin Marvin,

hast du schon mal tfoot ausprobiert?

Viele Grüße
Robert

[Marvin Esse]

Hallo Robert,

tfoot hatte ich als erstes versucht, aber bei nur wenigen Teilnehmern klebte dann der Footer nicht am Ende der Seite sondern direkt unter der Tabelle. Wenn ich die Tabellen-Höhe auf 100% setzen würde, zieht er dann nicht die Zeilen auf? Würde dann ein Seitenwechsel erkannt?

Marvin

[Auge]

Hallo

Wenn ich die Tabellen-Höhe auf 100% setzen würde, zieht er dann nicht die Zeilen auf? Würde dann ein Seitenwechsel erkannt?

Probiere es doch einfach aus. Schließlich geht nichts kaputt und nicht funktionierenden Code kannst du auch wieder löschen.

edit: Beachte bitte, dass tfoot vor dem oder den tbody(s) notiert wird. Siehe SelfHTML-Wiki.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

edit: Beachte bitte, dass tfoot vor dem oder den tbody(s) notiert wird. Siehe SelfHTML-Wiki.

Beachte bitte, dass diese Information falsch ist.

Lieber doch mal in die Specs [HTML 5.2, WHATWG] kucken als in die zweifelhafte SELFHTML-Doku.

Aber nein, lieber den runtermachen, der es wagt, die SELFHTML-Doku anzuzweifeln.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Aber nein, lieber den runtermachen, der es wagt, die SELFHTML-Doku anzuzweifeln.

Grein ner net. 😉

Die Zeit für dieses Posting hättest du auch für die Korrektur im Wiki verwenden können.

Ich bin mir relativ sicher, dass die unsinnige Reihenfolge früher (auch noch in HTML5) Gesetz war und finde es gut, dass es jetzt geändert wurde.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ich bin mir relativ sicher, dass die unsinnige Reihenfolge früher (auch noch in HTML5) Gesetz war und finde es gut, dass es jetzt geändert wurde.

Obwohl: So unsinnig war die Reihenfolge auch nicht, denn der tfoot enthält oft auch Informationen, die für die gesamte Tabelle gelten.

Bis demnächst
Matthias

[Auge]

Hallo

Aber nein, lieber den runtermachen, der es wagt, die SELFHTML-Doku anzuzweifeln.

Ach guck an. Austeilen kann er, der Herr Bittersmann, aber einstecken ist nicht sein Ding.

Ich habe hier noch nie gelesen, dass du hier runtergemacht wurdest, weil du fehlerhafte Inhalte der SELFHTML-Doku anzweifeltest. In oft harschem Ton wirst du dafür kritisiert, dass du erklärtermaßen nicht dazu beitragen willst, die fehlerhaften Inhalte zu korrigieren. Zudem auch dafür, dass du Gründe dafür anführst, die für so manchen Leser hier nicht stichhaltig sind.

Ich denke, das weißt du auch, aber herumzuningeln, wie es hier sonst nur von Forumsanfängern und von pl zu lesen ist, ist natürlich viel einfacher.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Ich habe hier noch nie gelesen, dass du hier runtergemacht wurdest, weil du fehlerhafte Inhalte der SELFHTML-Doku anzweifeltest.

Drei Minuspunkte für Nestbeschmutzung. Und wenn ich mit Belegen dafür komme, interessiert das keinen.

Ich zweifle nicht fehlerhafte Inhalte der SELFHTML-Doku an, sondern ich zweifle die SELFHTML-Doku wegen ihrer fehlerhaften Inhalte an.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Drei Minuspunkte für Nestbeschmutzung. Und wenn ich mit Belegen dafür komme, interessiert das keinen.

Schonmal darüber nachgedacht, dass du die Ursache missdeutest? Ich habe dir z.B. einen Minuspunkt gegeben und habe mich nicht weiter geäußert wegen deiner dogmatischen, passiv-agressiven Art der Kommunikation.

Und nein, ich möchte das nicht mit dir diskutieren. Ich habe das bereits mehrfach versucht.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Drei Minuspunkte für Nestbeschmutzung. Und wenn ich mit Belegen dafür komme, interessiert das keinen.

Schonmal darüber nachgedacht, dass du die Ursache missdeutest? Ich habe dir z.B. einen Minuspunkt gegeben und habe mich nicht weiter geäußert wegen deiner dogmatischen, passiv-agressiven Art der Kommunikation.

Und nein, ich möchte das nicht mit dir diskutieren. Ich habe das bereits mehrfach versucht.

Ich weiß nicht, worin du in „Zumal sich mir der Sinn nicht erschließt“ eine „dogmatische, passiv-agressive Art der Kommunikation“ siehst.

Aber wenn du nicht drüber reden willst, werd ich es wohl nie erfahren.

LLAP 🖖

[MudGuard]

Hi,

tfoot hatte ich als erstes versucht, aber bei nur wenigen Teilnehmern klebte dann der Footer nicht am Ende der Seite sondern direkt unter der Tabelle. Wenn ich die Tabellen-Höhe auf 100% setzen würde,

bis jetzt klingt das für mich eher so, als wolltest Du die min-height (nicht die height) setzen.

cu,
Andreas a/k/a MudGuard

[Robert B.]

Hallo Marvin,

achso, es soll gar kein Tabellenfuß sein, sondern ein Seitenfuß. Ich glaube, dass dann HTML+CSS eventuell die falsche Technologie für dein Problem isein könntest, weil es fürs Web und nicht fürs Papier ist. Du kannst mal die Manipulation von Kopf- und Fußzeile probieren, ansonsten musst du (z.B. mit XSL-FO) eine Druckausgabe erzeugen.

Viele Grüße
Robert

[TS]

Hello,

auf Stackoverflow ist ein Beipiel, das so leidlich funktioniert, ab "EDIT".

Ich bastele gerade damit rum. <pre> ist wie immer das Problemkind.

Und dann gab es vor einiger Zeit (2015) einen Artikel im Smashing Magazine mit dem Titel Designing For Print With CSS. Der erklärt zumindest mal das Page-Model.

EDIT:
Wenn ich mein Gebastel mit dem PDF-Printer aus dem Firefox heraus drucke, klappt es jetzt sogar mit einem <pre>-Bereich. Allerdings habe ich dem whitespace: pre-line; gegeben.

Liebe Grüße
Tom S.

[Marvin Esse]

Hallo Tom,

mit dem Beispiel vom stackoverflow (die einzig wesentliche Änderung, die ich erkennen konnte ist der footer-Tag) funktioniert erstmal soweit, dass die Tabelle bei der nächsten Seite auch den Header wieder zeigt. Aber der Footer wird nur auf der zweiten Seite angezeigt und nicht schon auch auf der ersten.

LG Marvin

[TS]

Hello,

dann lies dir mal das Excerpt vom Smashing Magazine durch. Ich habe eben geschaut. Es ist noch drauf.

Hab jetzt leider keine Zeit, das nochmal durchzuarbeiten. Jedenfalls habe ich eben nochmal festgestellt, dass meine Firefüchse die Print-CSS nicht aktualisieren beim Neuladen (mit STRG-F5) der Seite, den Teil, der den Screen betrifft aber sehr wohl.

Wenn ich einen (neuen) Parameter an die URL anhänge, geht es aber.

Da liegt also scheinbar noch einiges im Argen.

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo Marvin Esse,

Der Footer:

	<div class="printfooter">
			Teilnehmerliste<br/>
			2017-06-02<br/>
			M. Esse<br/>
	</div>

<footer>
  Teilnehmerliste<br>
  2017-06-02<br>
  M. Esse
</footer>

Auch das halte ich persönlich für Papierverschwendung.

<footer>
  Teilnehmerliste, 2017-06-02, M. Esse
</footer>

Firefox hat schon 2015 footer-Elemente ganz brav und freiwillig auf jeder Seite wiederholt.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Firefox hat schon 2015 footer-Elemente ganz brav und freiwillig auf jeder Seite wiederholt.

Und das ist auch immer noch so:

<!DOCTYPE html>
<html lang="de"> 
  <head>
    <meta charset="utf-8">
    <style>
      p {
        margin: 2em;
      }
      footer {
        position: fixed;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p><p>Absatz</p>
    <footer>Footer</footer>
  </body>
</html>

Getestet im aktuellen Firefox, Chrome, Edge sowie IE11 unter Windows10.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Geht auch bei Tabellen.

<!DOCTYPE html>
<html lang="de"> 
  <head>
    <meta charset="utf-8">
    <style>
      td {
        padding: 2em;
        border: 1px solid;
      }
      footer {
        position: fixed;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <table>
    <tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr><tr><td>td</td></tr>
    </table>
    
    <footer>Footer</footer>
  </body>
</html>

Getestet wie oben.

Die Seitenzahlen anzugeben, ist wohl über CSS nicht möglich.

Bis demnächst
Matthias

[Robert B.]

Hallo zusammen,

Die Seitenzahlen anzugeben, ist wohl über CSS nicht möglich.

wenn der Browser richtig konfiguriert ist, druckt er die Seitenzahlen von sich aus ;-)

Viele Grüße
Robert

[Marvin Esse]

Hallo Matthias,

vielen Dank für das funktionierende Beispiel. Dann muss die Ursache für das fehlerhafte Verhalten also bei mir woanders im Code zu suchen sein.

Das mit den Seitenzahlen ist glücklicherweise nur optional (da der Firefox ja im Standard schon Seitenzahlen druckt).

Ansonsten ist die Form leider durch unser Qualitätsmanagement vorgegeben. Die schreiben vor, wo was in welcher Schriftgröße und Form zu stehen hat.

LG Marvin

[Mitleser]

Ansonsten ist die Form leider durch unser Qualitätsmanagement vorgegeben. Die schreiben vor, wo was in welcher Schriftgröße und Form zu stehen hat.

Dann solltest Du über die Generierung eines PDF für Druckdaten nachdenken, sonst gibt das keinen.

[Matthias Apsel]

Hallo Mitleser,

Dann solltest Du über die Generierung eines PDF für Druckdaten nachdenken, sonst gibt das keinen.

Zitat 1242 😂

Bis demnächst
Matthias