-1

I want to rotate a td in a table but I am not getting the required result. What I am getting is image (1) but i want image (2). I want the Department td to rotate 270deg. It is rotating but it is going out of the bounds/borders in the vertical position. Hope anyone can help me.image 1 image 2

here is the code I am using in my table: 

<table border="1" width=80% cellspacing="0">
            <tr>
                <th colspan="2" rowspan="2" bgcolor=#FE9900><p>Organizational<br>Matrix</th></p>
                <th colspan="6" bgcolor=#FFCC03>Product</th>
            </tr>
            <tr bgcolor=#FAEBD7>
                <td>Project 1</td>
                <td>project2</td>
                <td>project3</td>
                <td>project4</td>
                <td>project5</td>
                <td>project6</td>
            </tr>
            <tr>
                <td rowspan="5" align="center" bgcolor=#FFCC03 style="transform: 
                rotate(270deg);">Department</td>
                <td bgcolor=#FAEBD7 align="center">Operations</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
            </tr>
            <tr>
                <td bgcolor=#FAEBD7 align="center">Marketing</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
            </tr>
            <tr>
                <td bgcolor=#FAEBD7 align="center">Accounts</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>
            <tr>
                <td align="center"bgcolor=#FAEBD7>Hr</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>
            <tr>
                <td align="center" bgcolor=#FAEBD7>IT</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>

        </table>
Virus
  • 9
  • 1
  • Why... Why not use CSS for everything? – D. Pardal Apr 24 '20 at 21:32
  • Does this answer your question? [how to rotate text left 90 degree and cell size is adjusted according to text in html](https://stackoverflow.com/questions/15806925/how-to-rotate-text-left-90-degree-and-cell-size-is-adjusted-according-to-text-in) – Fatemeh Qasemkhani Apr 26 '20 at 11:45

2 Answers2

0

Here, just create a <div> inside the cell and rotate it.

<table border="1" width=80% cellspacing="0">
            <tr>
                <th colspan="2" rowspan="2" bgcolor=#FE9900><p>Organizational<br>Matrix</th></p>
                <th colspan="6" bgcolor=#FFCC03>Product</th>
            </tr>
            <tr bgcolor=#FAEBD7>
                <td>Project 1</td>
                <td>project2</td>
                <td>project3</td>
                <td>project4</td>
                <td>project5</td>
                <td>project6</td>
            </tr>
            <tr>
                <td rowspan="5" align="center" bgcolor=#FFCC03><div style="transform: rotate(270deg);">Department</div></td>
                <td bgcolor=#FAEBD7 align="center">Operations</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
            </tr>
            <tr>
                <td bgcolor=#FAEBD7 align="center">Marketing</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
            </tr>
            <tr>
                <td bgcolor=#FAEBD7 align="center">Accounts</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>
            <tr>
                <td align="center"bgcolor=#FAEBD7>Hr</td>
                <td align="center">☓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>
            <tr>
                <td align="center" bgcolor=#FAEBD7>IT</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
                <td align="center">☓</td>
                <td align="center">✓</td>
                <td align="center">✓</td>
            </tr>

        </table>

By the way, you should not use attributes like border, width, bgcolor, etc... They are deprecated in HTML5 and were replace by their equivalent CSS properties.

D. Pardal
  • 6,173
  • 1
  • 17
  • 37
0

Your problem is the vision of UI creation. the way you need is to build the table with rowspan and colspan and ... and that yellow column to(the yellow color is for the <td> it selfs) and then put the text on it and just rotate the <div>My Text</div> for any degrees you want. the point is this Text has No Background at all so it will never happen like that...