web-dev-qa-db-fra.com

Ajuster un tableau html au format A4

J'ai un fichier html avec une large table. Je veux pouvoir le mettre au format A4. Les colonnes qui dépassent la taille A4 doivent apparaître ci-dessous dans un nouveau tableau.

J'ai essayé d'utiliser cet attribut @page, mais cela n'a rien changé,

<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

Existe-t-il une bibliothèque js tierce qui le fait automatiquement? (La taille du tableau n'est pas connue au préalable, l'utilisateur télécharge les données et génère le tableau, donc le nombre de colonnes n'est pas fixe). {Mon objectif final est de l'imprimer au format PDF, mais je n'ai pas pu atteindre cet objectif à l'aide de qprinter donné dans QT}

J'ai mis un fichier html avec une longue table ici - lien .

Merci d'avance

htmlcsspdf
12
clearScreen

Le tableau n'a pas pu casser ses colonnes dans une nouvelle ligne, tout ce que vous pouvez faire est de faire la largeur du tableau en fonction de la largeur du papier.

La largeur de la page A4 en px est de 2480 pixels x 3508 pixels.

vous ferez donc la largeur maximale de la table à 2480px afin qu'elle ne puisse pas dépasser la taille du papier.

Supposons que votre table id = "table", alors votre style devrait être.

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    Word-wrap: break-Word;
  }
</style>
4
Fawad Ali

Cela semble faire ce que vous voulez, si c'est pour placer les pages imprimées côte à côte et lire le tableau entier tel qu'il est à l'écran. Cela a fonctionné avec le code HTML que vous avez fourni dans votre lien, ajoutez-le à votre feuille de style (je n'ai testé que dans Chrome)

  @media print{  
   @page {size:landscape;}
   html{
    -ms-transform: rotate(90deg);/* IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
   }

   table,h1,h2 {position:relative;left:4.5cm}
  }

La clé consiste à faire pivoter le contenu pour l'impression afin qu'il déborde "vers le bas" à la page suivante, puis définissez la taille sur paysage pour faire pivoter le papier, de sorte que vous vous retrouvez avec des pages orientées portrait de gauche à droite. Malheureusement, je n'ai pas pu faire sauter la page entre les colonnes. Mais si vous affichez toutes les pages imprimées côte à côte sur un mur, elles seront lisibles. L'aperçu avant impression affichera toutes les pages tournées à 90 degrés, c'est ce que vous voulez, puis sélectionnez A4 comme format de papier dans la boîte de dialogue d'impression. J'ai dû repositionner le tableau et vos en-têtes car il pendait du côté gauche de la première page, peut-être à cause de tous les div imbriqués avec des styles en ligne?, Je ne sais pas, comme je l'ai dit, cela fonctionnait avec votre html.

Voici le fichier PDF imprimé (j'ai répété votre première ligne plusieurs fois dans cet exemple) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=

2
Arleigh Hix

Vous devriez essayer d'utiliser des divs plutôt que des tableaux si vous voulez obtenir de bonnes feuilles imprimables. Avec <div> nous avons un meilleur contrôle sur la façon dont il s'affiche. <div> peut facilement être stylé contrairement à <table>, <tr>, <td>, etc.

Voici quelque chose que j'ai fait:

CSS

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.divTableRow > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.divTableRow {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .divTable {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-Origin: bottom left;
        display: block;
    }
}


.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
  width:100px; // set to a fixed value so as to get the table in the ordered manner.
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

Vous pouvez personnaliser les mêmes si nécessaire.

Violon: div-table-printable

Vous pouvez convertir votre html avec <table> à <div> en utilisant table vers div

Autres références:

tableau-html-impression

CSS2PDF

2
Ani Menon