Wie man Text um 90 Grad nach links dreht und die Zellengröße entsprechend dem Text in HTML angepasst wird

77

Angenommen, ich habe eine Tabelle mit einigen Zeilen und Spalten, also möchte ich Text in Zellen wie folgt drehen
: Geben Sie hier die Bildbeschreibung ein

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 durcheinander gebracht

HTML Quelltext:

<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>
css html html-table lata
quelle
@ Mr_Green: transform: rotate (-90.0deg); ich habe es in meinen Code eingefügt, aber keine Änderung. Darf ich wissen, wofür es verwendet wird?
Lata
Mögliches Duplikat der Erstellung einer HTML-Tabelle mit vertikal ausgerichtetem Text als Tabellenüberschrift
Don Kirkby

Antworten:

62

Sie können dies tun, indem Sie Ihr rotierendes CSS auf ein inneres Element anwenden und dann die Höhe des Elements an seine Breite anpassen, da das Element gedreht wurde, um es in das zu passen <td>.

Stellen Sie außerdem sicher, dass Sie Ihre id #rotateKlasse ändern , da Sie mehrere haben.

Eine 4x3-Tabelle mit den Überschriften in der ersten Spalte um 90 Grad gedreht

$(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>
Erweitern Sie das Snippet

JavaScript

Das Äquivalent zu dem oben genannten in reinem JavaScript lautet 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';
    }
});
Daniel Imms
quelle
Beachten Sie, dass die Werte 0,083 für 7,5 Grad gelten und für IE10 Sie -ms-transform benötigen: drehen (-90,0 Grad);
David Sykes
13
Dies funktioniert für kurzen Text, aber wenn Sie längeren Text eingeben, tdwird die Breite größer und es gibt keine Möglichkeit, ihn zu verkleinern :( +1 obwohl für den Arbeitsfall
Eduard Luca
@EduardLuca max-widthhilft beispielsweise beim Testen max-width: 1emin Chrome - aber die Zellenbreite ist nur eines der Probleme, die bei längerem Text auftreten. Mindestens (1) Wortbruch und (2) Positionierung / Ausrichtung kommen in den Sinn. (1) kann mit nicht unterbrechenden Zeichen und (2) mit relativer Positionierung anstelle von Textausrichtung unterstützt werden. wenn die Tabelle / Zelle etwas statisch ist. Das Drehen ist dennoch alles andere als ideal, kann aber in begrenzten Fällen nützlich sein.
Jari Keinänen
6
Versuchen Sie nun, die Spalte zu vergrößern und den Text zu zentrieren - und zu boomen - das Layout explodiert in Ihrem Gesicht! Selbst im Jahr 2015 müssen Sie noch einen generischen Bildhandler für vertikalen Text schreiben ... Das ist einfach absurd. Das sollte nicht so schwer sein. Es sollte so einfach sein wie <span style = "Textrichtung: verkehrt herum; Schriftgröße: fett; Schriftgröße: 10px;" > lalala </ span>, was es aus irgendeinem dummen Grund nicht ist.
Stefan Steiger
1. Zelle ist quadratisch. nicht was du willst.
Boris Gafurov
50

Ohne Höhe zu berechnen. Strenges CSS und HTML. <span/>Nur für Chrome, da Chrome die Textrichtung für nicht ändern kann <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>
Erweitern Sie das Snippet

18C
quelle
3
Das ist extrem gerissen und sehr robust. Tolle Idee, sollte die akzeptierte Antwort sein - kein JS, keine spezielle Breite, Höhe, Rand usw. Hacks - wirklich nett.
Andrew Hodgkinson
Um einen besseren Effekt zu erzielen, können Sie zusätzlich verwenden th span{display:table; border-spacin:0; margin-left:...}, um Anzeigeunterschiede zwischen IE11, Firefox und Chrome zu vermeiden.
18C
genau das, wonach ich suche, es passt automatisch die Höhe des Tabellenkopfes basierend auf dem Inhalt ohne zusätzliches JavaScript an! funktionierte gut mit meinem Anwendungsfall.
stvn9v
2
Es sieht so aus, sideways-lrals würde der rotierende 180-Grad-Hack nicht benötigt, aber nur Firefox unterstützt ihn derzeit .
Mpen
42

Die Antwort von Daniel Imms ist hervorragend, wenn es darum geht, Ihre CSS-Rotation auf ein inneres Element anzuwenden. Es ist jedoch möglich, das Endziel auf eine Weise zu erreichen, die kein JavaScript erfordert und mit längeren Textzeichenfolgen arbeitet .

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

Geben Sie hier die Bildbeschreibung ein

Durch die Verwendung der Klasse ".rotate" für das übergeordnete TD-Tag können wir nicht nur das innere DIV drehen, sondern auch einige CSS-Eigenschaften für das übergeordnete TD-Tag festlegen, die den gesamten Text dazu zwingen, in einer Zeile und zu bleiben Halten Sie die Breite auf 1,5 em. Dann können wir einige negative Ränder auf dem inneren DIV verwenden, um sicherzustellen, dass es 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>
Erweitern Sie das Snippet

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

Viel Spaß beim Herumspielen auf jsFiddle .

Reichlich vorhandene Designs
quelle
Als Hinweis: Ich habe die margin-leftund margin-right-Werte von -10emauf -100emerhöht, um auf der sicheren Seite zu sein. Wenn Ihre nicht gedrehte Textbreite überschreitet 20em, beginnt sich das Layout zu ändern. OTOH, die Textbreite 200emist viel zu groß, um sie um -90 Grad gedreht zu lesen. Daher sollte dies ausreichen, um zu vermeiden, dass dieses Problem auftritt.
Maxathousand
^^ Mein Fix oben verursachte übermäßigen Leerraum unter meinem Tisch, da sich die Ränder ziemlich weit erstreckten (oder nach dem Drehen "hoch" waren). Um das zu beheben, habe ich overflow: hiddendie gedrehte hinzugefügt td.
Maxathousand
1
Funktioniert nicht mit IE11. Sie sollten auch 'transform' und '-ms-transform'
hinzufügen
2

Obwohl ich dachte, dass diese Antworten für mich funktioniert haben könnten, hatte ich leider Probleme mit einer Lösung, da ich Tabellen in reaktionsfähigen Tabellen verwende - mit denen das Überlauf-x gespielt wird.

Schauen Sie sich in diesem Sinne diesen Link an, um einen saubereren Weg zu finden, der keine seltsamen Probleme mit dem Breitenüberlauf aufweist. Am Ende hat es bei mir funktioniert und war sehr einfach zu implementieren.

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

vr_driver
quelle