我想在 html 中旋转一个 td 但它没有显示所需的结果？

Question

我想在表格中旋转一个 td，但没有得到所需的结果。我得到的是图像（1），但我想要图像（2）。我希望部门 td 旋转 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

在这里，只需在单元格内创建一个<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 等属性...它们在 HTML5 中已被弃用，并被其等效的 CSS 属性所取代。

Answer 2

您的问题是 UI 创建的愿景。您需要的方法是使用 rowspan 和 colspan 和...构建表格，然后将黄色列设置为（黄色用于 <td> 它自身），然后将文本放在其上，然后将 <div>My Text</div> 旋转为你想要的任何学位。关键是这个文本根本没有没有背景，所以它永远不会像那样发生......