2016-05-26 5 views
1

Ich habe eine große HTML-Tabelle, die nicht geändert werden kann. Ich möchte nach jeder Zeile Seitenumbrüche einfügen, wenn die Ausrichtung Querformat ist nur.Chrome (v51) - Medienabfrage zum Einfügen von Seitenumbrüchen zwischen Tabellenzeilen - nur Querformat

Ich habe eine kleine Testseite erstellt, um eine Lösung zu finden.

Dieser Code funktioniert wie unter Firefox 46,0 erwartet, aber überhaupt nicht unter Chrome 51.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS print media query test</title> 
<style> 
body { 
    font-family: arial,sans; 
} 
table { 
    margin: 0 auto; 
} 
table tr { 
    height: 500px; 
    vertical-align: top; 
} 
table td { 
    border: 1px solid #23ffff; 
    background-color: #edffff; 
    padding: 15px; 
    cell-spacing: 5px; 
} 
@media print and (orientation:landscape) { 
    table tr { 
     page-break-after: always !important; 
    } 
} 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td>$i is 1 and $j is 1</td> 
<td>$i is 1 and $j is 2</td> 
<td>$i is 1 and $j is 3</td> 
<td>$i is 1 and $j is 4</td> 
</tr> 
<tr> 
<td>$i is 2 and $j is 1</td> 
<td>$i is 2 and $j is 2</td> 
<td>$i is 2 and $j is 3</td> 
<td>$i is 2 and $j is 4</td> 
</tr> 
<tr> 
<td>$i is 3 and $j is 1</td> 
<td>$i is 3 and $j is 2</td> 
<td>$i is 3 and $j is 3</td> 
<td>$i is 3 and $j is 4</td> 
</tr> 
<tr> 
<td>$i is 4 and $j is 1</td> 
<td>$i is 4 and $j is 2</td> 
<td>$i is 4 and $j is 3</td> 
<td>$i is 4 and $j is 4</td> 
</tr> 
</table> 
</body> 
</html> 

Dies ist eine Testseite, ich normalerweise nicht die CSS in Tags setzen.

Antwort

1

CSS-Seitenumbruchattribute only work on block-level elements. Fügen Sie display: block hinzu und passen Sie bei Bedarf den Abstand an.

@media print and (orientation:landscape) { 
    table tr { 
     display: block; 
     page-break-after: always; 
    } 
}