Table column rotated but how to position the rotated cell. - html

Question

Here is a simple table. I want table column to rotate. That's why I have added a class text-flip. It will rotate the column data. But I want to change Cell 1, Cell 2 width based on column data width (after rotate). Like thebelow picture-
Here column data size may be change.
body{
padding-top: 50px;
}
.text-flip{
transform: rotate(-90deg);
}
<table border="1">
<tbody>
<tr>
<td class="text-flip">Column Data 1</td>
<td class="text-flip">Column Data 2</td>
<td class="text-flip">Column Data 3</td>
<td class="text-flip">Column Data 4</td>
<td class="text-flip">Column Data 5</td> </tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>

Answer 1

You can do it by combining writing-mode with a rotation to achieve vertical text. You'll also need to add the class to a div instead of the td.
Edge will treat the height of the div as though it was 100% width, making it take up the full height of the table, so we can add display: inline-block to make it only take up as much space as needed.
body{
padding-top: 50px;
}
.text-flip{
display: inline-block;
writing-mode: tb-rl;
transform: rotate(-180deg);
white-space: nowrap;
padding: 10px
}
<table border="1">
<tbody>
<tr>
<td ><div class="text-flip">Column Data 1</div></td>
<td><div class="text-flip">Column Data 2</div></td>
<td><div class="text-flip">Column Data 3</div></td>
<td><div class="text-flip">Column Data 4</div></td>
<td><div class="text-flip">Column Data 5</div></td> </tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>

Answer 2

You could use writing-mode if you can spare IE/Edge and Safari
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
body{
padding-top: 50px;
}
.text-flip{
writing-mode: vertical-lr;
}
<table border="1">
<tbody>
<tr>
<td class="text-flip">Column Data 1</td>
<td class="text-flip">Column Data 2</td>
<td class="text-flip">Column Data 3</td>
<td class="text-flip">Column Data 4</td>
<td class="text-flip">Column Data 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>

Answer 3

You can do like this :-
body{
padding-top: 50px;
}
.text-flip {
white-space: nowrap;
height: 120px;
vertical-align: bottom;
}
.text-flip > div {
transform: rotate(-90deg);
width: 30px;
}
.text-flip > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<table border="1">
<tbody>
<tr>
<td class="text-flip"><div><span>Column Data 1</span></div></td>
<td class="text-flip"><div><span>Column Data 2</span></div></td>
<td class="text-flip"><div><span>Column Data 3</span></div></td>
<td class="text-flip"><div><span>Column Data 4</span></div></td>
<td class="text-flip"><div><span>Column Data 5</span></div></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>