zuerst "line break" dann page-break

kochsystems · 29 Oktober 2015

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

djheke · 29 Oktober 2015

Vielleicht mit float und clear.

kochsystems · 30 Oktober 2015

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

scbawik · 30 Oktober 2015

kochsystems schrieb:
das hab ich schon versucht aber dann ist die reihenvolge von links nach rechts statt oben nach unten...

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

djheke · 30 Oktober 2015

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

Code:

* { 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.

kochsystems · 30 Oktober 2015

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

djheke · 30 Oktober 2015

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

kochsystems · 30 Oktober 2015

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

kochsystems · 30 Oktober 2015

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

Code:

<!doctype html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>NETs.werk Rechung</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" media="all" rel="stylesheet"/>
    <style type="text/css">
        @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>
</head>

<body>
    <div class="page">
        <div class="row">
            <div class="col-xs-12" style="margin-bottom: 10px;">
               <h4>{Überschrift}</h4>
            </div>
        </div>
            <?php for($i = 1; $i < rand(10, 20); $i++) { ?>
                <table class="table table-bordered" style="width: 33%;" >
                    <tbody>
                    <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" style="font-size: 11px; width: 5mm;">{Anz}</td>
                        </tr>
                    <?php } ?>
                    </tbody>
                </table>
            <?php } ?>
    </div>
</body>
</html>

djheke · 30 Oktober 2015

Guck mal ob es so ausreicht.

Code:

<!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.

kochsystems · 30 Oktober 2015

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

:)

djheke · 1 November 2015

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

zuerst "line break" dann page-break

kochsystems

Neues Mitglied

djheke

Aktives Mitglied

kochsystems

Neues Mitglied

scbawik

Senior HTML'ler

djheke

Aktives Mitglied

Anhänge

kochsystems

Neues Mitglied

Anhänge

djheke

Aktives Mitglied

kochsystems

Neues Mitglied

kochsystems

Neues Mitglied

djheke

Aktives Mitglied

Anhänge

kochsystems

Neues Mitglied

djheke

Aktives Mitglied

Neueste Beiträge