css - sans - Rotation verticale du texte dans une cellule d'en-tête de tableau HTML




tableau html exemple (4)

Si vous avez besoin d'ajuster juste la largeur des cellules et qu'elles ne contiennent qu'une seule ligne de texte, vous pouvez le faire: http://jsfiddle.net/sSP8W/3/ - Définir la width d'un élément à sa line-height de line-height .

Le problème avec CSS3-transforms est qu'ils fonctionnent comme position de CSS position: relative : leur boîte d'origine reste la même, ainsi la rotation, l'inclinaison etc. ne provoquent pas les changements dans les dimensions de l'élément. Donc: il n'y a vraiment pas de solution CSS parfaite, vous pouvez utiliser JS pour ajuster les dimensions, ou essayer de trouver des solutions de rechange hackety. Donc, si vous avez seulement des liens dans une table, vous pouvez faire quelque chose comme ça: http://jsfiddle.net/sSP8W/4/ - faire pivoter la table elle-même.

Si votre dossier contient un autre contenu que vous ne souhaitez pas faire pivoter, mettez le post à jour, afin que nous puissions essayer de trouver une meilleure solution.

upd: Nous venons de trouver une solution au texte pivoté dans les tableaux: en utilisant de la magie avec des paddings verticaux, nous pourrions faire en sorte que les cellules s'étendent au contenu, alors regardez cet exemple presque final: http://dabblet.com/gist/4072362

J'utilise le css suivant pour faire pivoter le texte à l'intérieur des cellules d'en-tête du tableau mais les cellules d'en-tête sont de la même largeur que si le texte était horizontal.Comment puis-je simplement faire pivoter le texte et la largeur

    table#MyTable tr th a{
    color: #FFFFFF;
    display: block;
    /*Firefox*/
    -moz-transform: rotate(-90deg);
    /*Safari*/
    -webkit-transform: rotate(-90deg);
    /*Opera*/
    -o-transform: rotate(-90deg);
    /*IE*/
    writing-mode: tb-rl;
    filter: flipv fliph;
    padding: 60px 1px;
}

Débarrassez-vous du padding:60px 1px; (sauf si vous en avez besoin pour une autre raison ... mais c'est ce qui cause le problème).

Exemple: http://jsfiddle.net/purmou/sSP8W/


Mods: désolé que ce message "répond à une réponse". Mais je n'ai pas le karma nécessaire pour le commenter. Catch-22.

Le code dans la réponse @ jobjorn et fiddl dépend de la largeur de la cellule pour calculer la hauteur de l'en-tête, ce qui conduit à des hauteurs erronées quand une cellule est large. Ce violon modifié utilise la largeur du texte de l'en-tête à la place: http://jsfiddle.net/marvmartian/76z82/

    cellsToRotate.each(function () {
        var cell = $(this);
        var s = '<div id="killme" style="position:absolute; top:-10000px; left:-10000px;"><span id="string_span" style="font-weight: bold; font-size: 1em">'+
            cell.text()+'</span></div>';
        $(window).append(s);
        var width = $('#string_span').width();
        var newText = cell.text()
            , height = cell.height()
            //, width = cell.width()
            , newDiv = $('<div>', {  height: width,  width: height })
            , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

Dans IE et Chrome (Blink et Webkit), vous pouvez placer le texte dans un enfant avec un mode d'écriture verticale plutôt que d'utiliser une transformation. Vous sauve toutes les astuces CSS et JavaScript. Chrome a un bug d'affichage mineur pour le moment (Chrome 37), mais il a été signalé.

.vertical { 
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
 }

 <td><span class="vertical">This text should be vertical.</span></td>

Je recommande d'utiliser white-space:nowrap sur le texte vertical dans la table.





html-table