Groupe d'en-têtes de tableaux ne fonctionnant pas avec la transformation css en cours d'impression

Question

J'essaie d'imprimer une table avec plus de 10 colonnes. J'ai donc essayé de faire pivoter les en-têtes de la table en position verticale. Maintenant je dois imprimer cette table et je veux obtenir l'en-tête tourné dans toutes les pages. quand j'imprime la table pour la première page je peux voir les en-têtes verticaux mais il n'est pas suivi par d'autres pages (seulement la première page rend les en-têtes de tableau).

J'ai créé un échantillon sur jsFiddle

th.rotate { 
    /* Something you can count on */ 
    height: 140px; 
    white-space: nowrap; 
} 

th.rotate > div { 
    transform: 
    /* Magic Numbers */ 
    translate(25px, 51px); 
    /* 45 is really 360 - 45 */ 
    -ms-transform:rotate(-90deg); 
     -o-transform:rotate(-90deg); 
     transform:rotate(-90deg); 
    width: 40px; 
} 
th.rotate > div > span { 
    border-bottom: 1px solid #ccc; 
    padding: 5px 10px; 
} 

Quelqu'un peut-il me aider ce que je suis absent dans ce domaine?

Sample Code

Merci à tous

Answer 1

Parce qu'il a besoin de répéter que l'en-tête de générer par lui-même, de sorte que s'il vous plaît les ajouter dans votre css.

PS: si vous imprimez au chrome, il n'aura aucun effet becuase chrome est supporte pas cette

thead {display: table-header-group;} 
tfoot {display: table-header-group;} 

Answer 2

Enfin j'ai obtenu un qui travaille en css chrome.

.vertical { 
     white-space: nowrap; 
     -ms-writing-mode: tb-rl; 
     -moz-writing-mode: vertical-rl; 
     -webkit-writing-mode: vertical-rl; 
     -ms-writing-mode: vertical-rl; 
     writing-mode: vertical-rl; 
    } 

<th ><div><span class="vertical">Column header</span></div><th>