comment faire pivoter un texte à gauche de 90 degrés et ajuster la taille de la cellule en fonction du texte en html

Question

Supposons que j'ai un tableau avec quelques lignes et colonnes, je veux faire pivoter le texte dans les cellules comme ceci

Le problème est que lorsque je fais pivoter le texte en utilisant le style :

#rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

tout s'embrouille comme ça

code html :

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id='rotate'>10kg</td>
        <td >B</td>
        <td >C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id='rotate'>20kg</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id='rotate'>30kg</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>

</table>

css :

<style type="text/css">
td {
    border-collapse:collapse;
    border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
    visibility: hidden;
}
#rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
</style>

Answer 1

Sans calculer la hauteur. CSS et HTML stricts. <span/> seulement pour Chrome, parce que le chrome n'est pas capable de changer la direction de texte pour <th/> .

th 
{
  vertical-align: bottom;
  text-align: center;
}

th span 
{
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

<table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table>

Answer 2

Vous pouvez le faire en appliquant votre CSS de rotation à un élément interne, puis en ajustant la hauteur de l'élément pour qu'elle corresponde à sa largeur, puisque l'élément a été tourné pour s'adapter à l'intérieur de l'espace de travail. <td> .

Assurez-vous également de changer votre id #rotate à une classe puisque vous en avez plusieurs.

$(document).ready(function() {
  $('.rotate').css('height', $('.rotate').width());
});

td {
  border-collapse: collapse;
  border: 1px black solid;
}
tr:nth-of-type(5) td:nth-of-type(1) {
  visibility: hidden;
}
.rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <div class='rotate'>10kg</div>
    </td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>20kg</div>
    </td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
  <tr>
    <td>
      <div class='rotate'>30kg</div>
    </td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
  </tr>

</table>

JavaScript

L'équivalent de ce qui précède en JavaScript pur est le suivant :

jsFiddle

window.addEventListener('load', function () {
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) {
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    }
});

Answer 3

Daniel Imms est excellente en ce qui concerne l'application de votre rotation CSS à un élément interne. Toutefois, il est possible d'atteindre l'objectif final d'une manière qui ne soit pas conforme à la norme. ne nécessite pas de JavaScript et fonctionne avec de longues chaînes de texte. .

En général, la raison d'avoir du texte vertical dans la première colonne du tableau est de faire tenir une longue ligne de texte dans un court espace horizontal et d'accompagner de grandes rangées de contenu (comme dans votre exemple) ou de multiples rangées de contenu (ce que je vais utiliser dans cet exemple).

En utilisant la classe ".rotate" sur la balise TD parente, nous pouvons non seulement faire pivoter le DIV interne, mais aussi définir quelques propriétés CSS sur la balise TD parente qui obligeront tout le texte à rester sur une seule ligne et à conserver une largeur de 1,5em. Nous pouvons ensuite utiliser des marges négatives sur le DIV interne pour nous assurer qu'il se centre bien.

td {
    border: 1px black solid;
    padding: 5px;
}
.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}
.rotate div {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
         margin-left: -10em;
         margin-right: -10em;
}

<table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td class='rotate' rowspan="4"><div>10 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>

    <tr>
        <td class='rotate' rowspan="4"><div>20 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>

    <tr>
        <td class='rotate' rowspan="4"><div>30 kilograms</div></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>S</td>
        <td>T</td>
    </tr>

</table>

Une chose à garder à l'esprit avec cette solution est qu'elle ne fonctionne pas bien si la hauteur de la ligne (ou des lignes étendues) est inférieure au texte vertical de la première colonne. . Cette méthode est la plus efficace si vous devez couvrir plusieurs rangées ou si vous avez beaucoup de contenu qui crée des rangées hautes.

Amusez-vous à jouer avec cela sur jsFiddle .

Answer 4

Malheureusement, alors que je pensais que ces réponses auraient pu fonctionner pour moi, j'ai eu du mal à trouver une solution, car j'utilise des tableaux à l'intérieur de tableaux réactifs - où l'on joue avec l'overflow-x.

Donc, avec cela à l'esprit, jetez un coup d'œil à ce lien pour une méthode plus propre, qui n'a pas les problèmes bizarres de débordement de largeur. Cela a fonctionné pour moi au final et a été très facile à mettre en œuvre.

https://css-tricks.com/rotated-table-column-headers/