Preethi Preethi - 6 months ago 24
HTML Question

How do I remove the space inside the html table cell above the Vertically rotated text

Kindly refer to the fiddle code:
https://jsfiddle.net/prtheei/207kvqtm/

How do I remove the space between the "VerticalText" and the right margin on the table. All I want is a small column to the right of my table spanning 5 rows and containing vertically rotated text. But on rotating the text, a huge space is created between the text and the right margin.

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>

Answer

I found a solution, but it changes your HTML a little bit. It puts the text of that cell in an seperate div (with class "extra") that's put into the td, gets position absolute plus horizontal and vertical centering. I also had to define a fixed width, otherwise the text would break into two lines. Apart from that I removed transform-origin: 20px; from .tdInfo to allow the centering as done below:

https://jsfiddle.net/L420gybb/

This is the changed HTML part:

This is the changed and added 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;
}