zuerst "line break" dann page-break

html.de-Forum HTML, XHTML & CSS
1

Hallo!
Ich habe mehrere Tablellen mit einer variablen Anzahl an Zeilen und wenn ich diese nun untereinander augeben lasse und auf Druckvorschau gehen macht er auch brav immer einen page-break wenn es nötig ist. Zb. auf Seite 1 sind 1-5 Tabellen auf seite 2 sind 6-12 Tabellen usw. Jetzt sind die Tabellen aber nur 33% von der A4 Breite und darum möchte ich dass zuerst die komplette Seite füllte als 3 Spaltig und erst dann eine neue beginnt. ABER es sollte so sein dass die Tabellen weiterhin geordnet untereinander weiterlaufen also Spalte 1: Tabelle 1, 2, 3, 4, 5 untereinander und dann weiter in Spalte 2: 6, 7, 8, 9, 10,… dann Spalte 3 und erst jetzt eine neue Seite!

Wie kann ich das machen?!?
Danke, Markus

2

Vielleicht mit float und clear.

3

das hab ich schon versucht aber dann ist die reihenvolge von links nach rechts statt oben nach unten…

4

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5

Alternativ kannst du auch jeweils 5 Tabellen in einem Div-Conteiner packen und diese floaten.

* { box-sizing: border-box;padding:0;margin:0;}

html , body , div {
height:100%;
width:100%;
}

table {
width:100%;
height:20%;
border-collapse:collapse;
border:1px solid #000;
}

td {
border:1px solid #000;
}
div {
float:left;
width:33%;
}

Hab’s probiert und es funktioniert in der Druckvorschau.

6

Naja, das ginge schon aber würde nur sinn machen wenn die Tabellen gleich viele Zeilen hätten und nicht so wie bei mir mal mehr und mal weniger, da liegt das Problem. Im „Falsch“ Bild habe ich es mit float versucht was zur folge hat, dass die Reihung von links nach rechts geht und sich dazwischen auch immer ein ungenutzter Freiraum bildet da sich die nächste „Zeile“ nach der längsten Tabelle richtet… Im „Richtig“ Bild hab ichs manuell so gebaut wie du auch… und geau das sollte eben automatisch am ende der Seite passieren…

Danke, Markus

7

Na dann musst du dein Script mit dem du deine Daten ausgibst etwas verfeinern.

8

ja…aber wie!? wie kann ich feststellen ob ich am ende der seite bin und dann oben weiter mache…

9

Hier mal mein Code. Viell. kannst du mir da weiterhelfen…

[CODE]

NETs.werk Rechung @import url(https://fonts.googleapis.com/css?family=Roboto); body { background-color: #d5d5d5; font-family: 'Roboto', sans-serif; } 
    table { page-break-inside: auto;  }
    tr    { page-break-inside:avoid; page-break-after:auto;}

    .page {
        height: 29.7cm;
        min-height: 100%;
        position: relative;
        width: 21cm;
        margin: 0 auto;
        padding: 5mm;
        background: white;
        box-shadow: 0 0 5px rgba(32, 32, 32, 0.44);
    }

    @page {
        size: A4;
        margin-left: 5mm;
        margin-right: 5mm;
        margin-top: 5mm;
        margin-bottom: 5mm;
    }

    @media print {
        body {
            background-color: white;
        }

        .page {
            box-shadow: none;
            background: white;
            padding: 0;
        }
    }

    @media print, screen {
        h5{
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 12px;
        }

        .page {
            font-size: 11px;
        }

        hr {
            margin-top: 5px;
            margin-bottom: 5px;
            border-color: #e4e4e4;
        }

        .table {
            margin-bottom: 5px;
        }

        .table > tbody > tr > td {
            padding: 1px 2px;
            font-size: 10px;
        }

    }
</style>

{Überschrift}

<?php for($i = 1; $i < rand(10, 20); $i++) { ?> 
                <tr>
                    <td colspan="3"><strong>{Einheit} {Artikel-Bezeichnung} {Preis/Einheit} {ArtikelNr}</strong></td>
                    <td class="text-center" style="font-size: 11px"><strong>{Summe}</strong></td>
                </tr>
                <?php for($x = 0; $x < rand(1,7); $x++) { ?>
                    <tr>
                        <td>{Nachname, Vorname}</td>
                        <td class="text-center">L</td>
                        <td class="text-center"></td>
                        <td class="text-center" style="font-size: 11px; width: 5mm;">{Anz}</td>
                    </tr>
                <?php } ?>
                </tbody>
            </table>
        <?php } ?>
</div>
[/CODE]
<?php echo $i; ?> {Lieferant} {--}
10

Guck mal ob es so ausreicht.

<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>NETs.werk Rechung</title>
<style type="text/css">
* { box-sizing: border-box;padding:0;margin:0;}


body {
background-color: #d5d5d5;
}

table {
border-collapse:collapse;
}

table h5 {
background:#000;
color:#fff;
margin:-2px;
padding:2px;
}
td {
font-size:11px;
border:1px solid #999;
padding:2px;
}
@media print {

body {
background:transparent;
}
table  {
page-break-inside:avoid;
display:inline-block;
}
.spalte {
width:100%;
-webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
td {
font-size:11px;
border:1px solid #999;
padding:2px;
}
table h5 {
background:#ddd;
margin:-2px;
padding:2px;
color:#000;
}

}
</style>
</head>
<body>
<div class='spalte'>
  <?php for($i = 1; $i < rand(10, 40); $i++) { ?>

  <table>

  <tr>
  <td colspan="4" class="bg-success"><h5> <?php echo $i; ?>  {Lieferant} {--}</h5></td>
  </tr>
  <tr>
  <td colspan="3"><strong>{Einheit} {Artikel-Bezeichnung} {Preis/Einheit} {ArtikelNr}</strong></td>
  <td class="text-center" style="font-size: 11px"><strong>{Summe}</strong></td>
  </tr>
  <?php for($x = 0; $x < rand(1,7); $x++) { ?>
  <tr>
  <td>{Nachname, Vorname}</td>
  <td class="text-center">L</td>
  <td class="text-center"></td>
  <td class="text-center">{Anz}</td>
  </tr>
  <?php } ?>
  </tbody>
  </table>
  <?php } ?>
</div><!--/.spalte-->

</body>
</html>

Ach, display:inline-block ist optional aber, verursacht gewollte Abstände.

11

Vielen herzlichen Dank!
Das ist genau das was ich gesucht hab.
Funktioniert perfekt!! :):D:)

12

Ach noch ein Hinweis. Im Zusammenhang mit Multicolumn ist die Angabe von page-break-inside:avoid;
nicht erforderlich.