web-dev-qa-db-fra.com

Rotation du texte d'en-tête de tableau avec des transformations CSS

Cela semble être possible avec les éléments suivants:

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

Cela fonctionne dans IE.

Cela ne va pas de manière bizarre dans Safari, Chrome et FX - la taille de la cellule est calculée avant le texte est tourné!

screenshot of bug

Voici une démo: http://jsfiddle.net/HSKws/

J'utilise des images dynamiques comme solution de contournement, bien que a également ses problèmes . Je suis satisfait de cela comme solution de rechange, mais il semble qu'il devrait y avoir un moyen de faire fonctionner ce CSS - c'est presque là.

Quelqu'un connaît-il un moyen d'adapter les cellules au contenu une fois la transformation appliquée?

csscross-browser
35
Keith

"Transformer" modifie l’orientation de l’élément entier sur lequel vous le déclarez, et non le contenu textuel qu’il contient. Cela ressemble plus à la propriété "matrice" d’IE qu’à "mode d’écriture".

Fondamentalement, la transformation d'un élément ne change pas la façon dont la taille de son contenu est calculée (ou la façon dont la disposition de son parent est affectée par cette taille). Les algorithmes de CSS pour le dimensionnement vertical et horizontal sont différents et suffisamment difficiles pour être directement utilisés; il n'y a pas de moyen vraiment cohérent pour accueillir le contenu avec une rotation arbitraire. Donc, "transformer" revient à utiliser "position: relative": cela change l’endroit où le contenu est rendu, mais rien à voir avec la taille de la mise en page.

Donc, si vous souhaitez en inclure un dans un tableau, vous devrez définir explicitement la "hauteur" de la cellule pour s'adapter à la "largeur" pivotée attendue. Si vous ne savez pas cela à l'avance, vous pourriez peut-être le pirater avec JavaScript.

FWIW: pour moi sur Fx3.1b3, la travée est également tournée comme les autres. Cependant, sur Windows avec son anti-aliasing horizontal uniquement (ClearType), le rendu n'a pas l'air génial ... une image bien rendue pourrait sortir considérablement mieux.

18
bobince

Il est possible d'utiliser le SVG en ligne dans un document XHTML (je n'ai testé que Safari et Firefox):

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <table border="1">
        <tr>
            <td>&#160;</td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
            <td>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="150">
                  <text id="thetext" transform="rotate(270, 12, 0) translate(-140,0)">Example column header</text>
                </svg>
            </td>
        </tr>
        <tr>
            <td>Example row header</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
  </body>
</html>

Malheureusement, vous devez définir explicitement la largeur et la hauteur des cellules de votre tableau et la traduction du texte rendu à l'aide de SVG. En outre, l'extension de fichier doit être xhtml.

9
otto.poellath

Webkit a ajouté:

-webkit-writing-mode:vertical-rl;

Ce que vous pouvez appliquer à un div.

7
Stephen Denne

Comme j'ai répondu à ne question similaire , je l'ai résolu en utilisant n plugin jQuery de David Votrubec et le commentaire de Mike sous le billet de blog.

Mettez ceci dans un fichier .js:

(function ($) {
  $.fn.rotateTableCellContent = function (options) {
  /*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/

var cssClass = ((options) ? options.className : false) || "vertical";

var cellsToRotate = $('.' + cssClass, this);

var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

newInnerDiv.css('-webkit-transform-Origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-Origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);

betterCells.Push(newDiv);
});

cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);

Et ceci en haut de votre page:

<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.yourtableclass').rotateTableCellContent();
    });
</script>

Et ceci dans votre CSS:

/* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    writing-mode:tb-rl;
    white-space: nowrap;
}

thead th {
    vertical-align: top;
}

table .vertical {
    white-space: nowrap;
}

Assurez-vous ensuite que votre table a la classe "yourtableclass" et que tous les TD que vous voulez faire pivoter ont la classe "vertical".

Voici ne démo exécutée dans un jsFiddle .

J'espère que ça aide quelqu'un, même si j'ai deux ans de retard!

6
Jobjörn Folkesson

Pour faire pivoter le texte dans les en-têtes de votre tableau:

  1. Placez le contenu de l'en-tête dans les divs - faites pivoter ces divs plutôt que l'en-tête lui-même
  2. Définissez la position: relative sur les en-têtes du tableau th, position: absolue sur les divs pivotés.
  3. Définir également la hauteur des en-têtes th

Terminé.

Tu peux le voir ici:

enter image description here

Ce que vous pouvez voir sur cette page si vous rendez votre fenêtre maigre - moins de 1000 pixels et qu'elle fait pivoter les en-têtes de tableau - http://www.rugbydata.com/

Voici le code que j'ai utilisé:

div.rotatabletext {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width:0px;
text-align:left;
height:0px;
margin-left:0px;
margin-top:0px;
bottom:2px;
position:absolute;
}
table.tournamentresults > * > tr > td {
padding:1px;
}
table.tournamentresults > thead > tr:nth-child(1) > th:nth-child(1) {
height:70px;
position:relative;
}
table.tournamentresults > thead > tr:nth-child(2) th {
height:70px;
position:relative;
}
4
Dave Hilditch

Cet outil a fait toute la réflexion pour moi ...

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

3
doublejosh