Я хочу повернуть тд в html, но он не показывает требуемый результат?

Question

Я хочу повернуть тд в таблице, но не получаю требуемого результата. Я получаю изображение (1), но я хочу изображение (2). Я хочу, чтобы департамент тд повернуть на 270 градусов. Он вращается, но выходит за пределы границ в вертикальном положении. Надеюсь, что кто-нибудь может мне помочь. image 1 image 2

Вот код, который я использую в моей таблице:

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

Answer 1

Ваша проблема - видение создания пользовательского интерфейса. вам нужно построить таблицу с помощью rowspan и colspan и ... и этого желтого столбца (желтый цвет - для <td>, который он сам), а затем поместить текст на него и просто повернуть <div>My Text</div> для любые степени, которые вы хотите. смысл в том, что у этого текста вообще нет фона , поэтому такого никогда не будет ...

Answer 2

Вы не можете повернуть тд, замените этот код:

<td rowspan="5" align="center" bgcolor=#FFCC03 >
  <span style="transform: rotate(270deg);display: block;">Department</span>
</td>

Answer 3

Здесь просто создайте <div> внутри ячейки и вращайте ее.

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

Кстати, вы не должны использовать такие атрибуты, как border, width, bgcolor, et c ... Они устарели в HTML5 и были заменены их эквивалентными CSS свойствами.