it-swarm.com.de

Wie man den Text um 90 Grad nach links dreht und die Zellengröße an den Text in HTML anpasst

Angenommen, ich habe eine Tabelle mit einigen Zeilen und Spalten, also möchte ich den Text in Zellen in etwa so drehen
enter image description here

problem ist, wenn ich Text mit Stil drehen:

#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 */

es wird alles so vermasselt

HTML-Code:

<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>
67
lata

Sie können dies tun, indem Sie Ihr CSS zum Drehen auf ein inneres Element anwenden und dann die Höhe des Elements so anpassen, dass sie mit seiner Breite übereinstimmt, da das Element gedreht wurde, um es in <td> Einzufügen.

Stellen Sie außerdem sicher, dass Sie id#rotate In eine Klasse ändern, da Sie mehrere haben.

A 4x3 table with the headers in the first column rotated by 90 degrees

$(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

Das Äquivalent zu dem oben in reinem JavaScript ist wie folgt:

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';
    }
});
60
Daniel Imms

Daniel Imms Die Antwort ist hervorragend, um Ihre CSS-Rotation auf ein inneres Element anzuwenden. Es ist jedoch möglich, das Endziel so zu erreichen, dass kein JavaScript benötigt und mit längeren Textfolgen arbeitet.

Normalerweise besteht der ganze Grund, vertikalen Text in der ersten Tabellenspalte zu haben, darin, eine lange Textzeile in einen kurzen horizontalen Bereich einzufügen und neben hohen Inhaltszeilen (wie in Ihrem Beispiel) oder mehreren Inhaltszeilen (wie ich es tun werde) zu stehen Verwenden Sie in diesem Beispiel).

enter image description here

Mit der Klasse ".rotate" für das übergeordnete TD Tag können wir nicht nur die innere DIV drehen, sondern auch einige CSS-Eigenschaften für das übergeordnete TD Tag, das den gesamten Text zwingt, in einer Zeile zu bleiben und die Breite auf 1.5em zu halten. Dann können wir einige negative Ränder am inneren DIV verwenden, um sicherzustellen, dass er gut zentriert ist.

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>

Eine Sache, die Sie bei dieser Lösung beachten sollten, ist, dass nicht gut funktioniert, wenn die Höhe der Zeile (oder der übergreifenden Zeilen) kürzer ist als der vertikale Text in der ersten Spalte. Dies funktioniert am besten, wenn Sie sich über mehrere Zeilen erstrecken oder wenn Sie viel Inhalt haben, um große Zeilen zu erstellen.

Viel Spaß beim Herumspielen auf jsFiddle .

35

Ohne Berechnung der Höhe. Strenges CSS und HTML. <span/> Nur für Chrome, da mit chrome) die Textrichtung für <th/> Nicht geändert werden kann.

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>
28
18C

Leider hatte ich, obwohl ich dachte, diese Antworten hätten bei mir funktioniert, Probleme mit einer Lösung, da ich Tabellen in reaktionsschnellen Tabellen verwende, mit denen das Überlauf-x gespielt wird.

Schauen Sie sich daher diesen Link an, um einen saubereren Weg zu finden, bei dem es nicht um Probleme mit dem Überlauf der seltsamen Breite geht. Am Ende hat es für mich funktioniert und war sehr einfach zu implementieren.

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

2
vr_driver