Compte tenu du document HTML suivant, je dois conserver la ligne "Titre de la table" sur la même page que le malgré la page Le DOCTYPE est XHTML 1.0 Transitional, j'ai code> lors de l'imprimé dans IE8.
-Break-Inside: évitez; code>, il existe toujours une pause de page entre le titre et la table. Ma compréhension de cela suggère une pause de page doit être évitée et l'ensemble div code> poussé à la page 2. p> document.compatmode ==" CSS1Compat ". Le XHTML est valide. P> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Page title</title>
</head>
<body>
<h1>Page content</h1>
this is some content
<br />which<br />should<br />push<br />the<br />table<br />below<br />on<br />to<br />the<br />next<br />page<br />but<br />the<br />table<br />should<br />be<br />kept<br />together<br />if<br />at<br />all<br />possible<br />please!
<div style="page-break-inside:avoid;">
<p><strong>Table title which needs to be kept with the table</strong></p>
<table>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>one</td><td>two</td><td>three</td></tr>
</table>
</div>
</body>
</html>
3 Réponses :
Support IE8 pour Cette fonctionnalité est Buggy .
Bien que Internet Explorer pour Windows version 8 prend en charge la valeur, évitez qu'il s'agisse d'un peu de buggy dans des endroits. Par exemple, si appliqué à un élément P, le navigateur tentera d'éviter de casser la page à l'intérieur de l'élément comme prévu; Mais
si appliqué à un élément UL, toute la liste n'est pas définie pour éviter que la liste peut s'étendre sur les deux pages. Cela dit, l'élément de liste individuel essaiera d'éviter d'avoir une pause de page à l'intérieur. Dans cet exemple, nous pouvons conclure qu'il tentera de ne pas casser la page à l'intérieur du P, ni à l'intérieur de la table, mais il ne va pas combiner les deux. Vous pouvez le tester en ayant un texte vraiment long dans votre
.
Un moyen de résoudre ce problème serait d'inclure votre titre dans votre table: < Pré> xxx
Bonjour Kraz - C'est utile, maintenant je sais ce qui se passe. Merci. Avez-vous des suggestions pour une solution de contournement? Il y a beaucoup de données tabulaires qui doivent être affichées - beaucoup de tables - chacune doit être conservée avec son titre et un texte explicatif.
Ajoutez votre titre Table à l'intérieur de votre table, c'est tout ce que je peux voir. Puis cuire votre table et faire l'en-tête de la table différente. (J'ai édité ma réponse avec un exemple.) Même chose pour le texte explicatif, mettez-le dans sa propre rangée et votre peau (une classe CSS peut-être?).
page-break ne fonctionne que sur un contexte de média paginé, comme @media Imprimer :
Essayez d'utiliser par exemple p> CSS Utilisez code> et d'ajouter le titre @ Média code> P> @media print {
tr th {
page-break-inside:avoid;
}
}
Pourquoi n'utilisez-vous pas l'élément pour l'en-tête de la table? Ensuite, essayez de mettre le
page-intérieure: évitez; à l'intérieur de l'élément de table.@Whoabackoff - ne fonctionne pas mieux.