Wie kann ich den Raum innerhalb des HTML-Tabellenzelle über dem Vertically entfernen gedrehter Text

sich bitte an der Geige Code verweisen: https://jsfiddle.net/prtheei/207kvqtm/Wie kann ich den Raum innerhalb des HTML-Tabellenzelle über dem Vertically entfernen gedrehter Text

Wie kann ich den Raum zwischen dem „VerticalText“ und am rechten Rand auf dem Tisch entfernen . Alles, was ich will, ist eine kleine Spalte rechts von meinem Tisch, die 5 Zeilen umfasst und vertikal gedrehten Text enthält. Beim Drehen des Textes entsteht jedoch ein riesiger Abstand zwischen dem Text und dem rechten Rand.

Table View

Code:

<html> 
<head> 
<meta charset="UTF-8"> 
<style> 
    table { 
    width: 900px; 
    border-collapse: collapse; 
    } 
    tr { 
    border: 1px black solid; 
    } 
    td { 
    border: 1px black solid; 
    width: 28%; 
    vertical-align: top; 
    padding: 8px; 
    } 
    .tdInfo { 
    vertical-align: middle; 
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); /* Safari/Chrome */ 
    -webkit-transform-origin: 20px; 
    -moz-transform: rotate(90deg); /* Firefox */ 
    -moz-transform-origin: 20px; 
    -o-transform: rotate(90deg); /* Opera */ 
    -o-transform-origin: 20px; 
    -ms-transform: rotate(90deg); /* IE 9 */ 
    -ms-transform-origin: 20px; 
    transform-origin 
    } 
    .tdTime { 
    width: 10%; 
    vertical-align: top; 
    font-weight:bold; 
    } 
</style> 
</head> 
<body> 
<table> 
    <tr> 
    <td class="tdTime">09:30</td> 
    <td colspan="4"><center>Row1</center></td> 
    </tr> 
    <tr> 
    <td class="tdTime">10:30</td> 
    <td colspan="3"><center>Row2</center></td> 
    <td class="tdInfo" rowspan="5">VerticalText</td> 
    </tr> 
    <tr> 
    <td class="tdTime">11:30</td> 
    <td>Row3Col2</td> 
    <td>Row3Col3</td> 
    <td>Row3Col4</td> 
    </tr> 
    <tr> 
    <td class="tdTime">12:30</td> 
    <td>Row4Col2</td> 
    <td>Row4Col3</td> 
    <td>Row4Col4</td> 
    </tr> 
    <tr> 
    <td class="tdTime">13:30</td> 
    <td>Row5Col2</td> 
    <td>Row5Col3</td> 
    <td>Row5Col4</td> 
    </tr> 
    <tr> 
    <td class="tdTime">14:30</td> 
    <td colspan="3"><center>Row 6</center></td> 
    </tr> 
</table> 
</body> 
</html>

Quelle

2016-05-24 Preethi

Es ist besser, wenn Sie den Text in ein div-Element einfügen und das innere div-Element und nicht das "" -Tag drehen. Einen TD drehen ist gefährlich. –

Um Ihre 90deg Transformationen für eine Sekunde loszuwerden, nimmt die Zelle die Breite des Textes als minimale Breite. – rsn

@rsn - das weiß ich nicht. Tnx. Scheint, ich muss es mit einem div inside td ändern, wie Johannes geantwortet hat. Dann hat es keinen Einfluss auf die Größe der Spalte. – Preethi

fand ich eine Lösung, aber es ändert sich Ihr HTML ein wenig. Es setzt den Text dieser Zelle in eine separate div (mit Klasse "extra"), die in der td gesetzt wird, bekommt absolute Position plus horizontale und vertikale Zentrierung. Ich musste auch eine feste Breite definieren, sonst würde der Text in zwei Zeilen aufgeteilt werden. Abgesehen davon, dass ich transform-origin: 20px; von .tdInfo entfernt, um die Zentrierung zu ermöglichen, wie unten getan:

https://jsfiddle.net/L420gybb/

Dies ist die geänderte HTML-Teil:

Dies ist geändert und hinzugefügt CSS:

.tdInfo { 
    vertical-align: middle; 
    transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); /* Safari/Chrome */ 
    -moz-transform: rotate(90deg); /* Firefox */ 
    -o-transform: rotate(90deg); /* Opera */ 
    -ms-transform: rotate(90deg); /* IE 9 */ 
    } 
.extra { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    text-align: center; 
    width: 120px; 
}

Quelle

2016-05-24 17:07:30 Johannes

Vielen Dank für die Lösung. Aber der Text scheint im Internet Explorer aus dem Tisch zu fliegen. Ich verwende Version IE11. Gibt es dafür einen Workaround oder eine Lösung? – Preethi

Wie kann ich den Raum innerhalb des HTML-Tabellenzelle über dem Vertically entfernen gedrehter Text

Antwort

Verwandte Themen