html - HTML 表格末尾的旋转 Div

Question

我认为看似微不足道的任务花费的时间比我预期的要长，但仍远未解决。我有一个包含一些数据的 HTML 表格。在表格的右侧，我想显示一个带有一些文本的旋转 div，类似于:

我已经设法按照我喜欢的方式创建了表格，但我终究无法让“报告”div 在表格的一侧对齐。

到目前为止，这是我的代码尝试，任何人都可以为我提供实现目标的任何指示吗？

.container {
  font-family: 'Open Sans', sans-serif;
  font-size: x-large;
  margin: 0;
  color: black;
  padding: 1em 0.5em;
  font-weight: 900;
}

.tableCont {
}

table {
  width: 100%;
  margin-bottom: 0.5em;
  font-size: 1em;
  border-collapse: collapse;
  border-spacing: 0;
  width: 60%;
}

table td {
  /*border-radius: 15px;*/
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
}

table td.colFY {
  width: 100px;
  background-color: #887870;
}

table td.norm {
  background-color: #B8B8B8;
  color: #082860;
}
div {
  display:inline;
}
.side {
  background: #B8B8B8;
  bottom:100%;
  height:100%;
  border-radius: 15px;
  display:inline;
  vertical-align:middle;
  -webkit-transform: rotateZ(90deg);
  transform-origin: 0 100%;
}

 <div class="tableCont">
        <table>
            <tr>
                <td class='colFY'>FY18</td>
                <td class='norm'>Subject 1</td>
                <td class='norm' data-title='HR Dashboard'>Subject 2</td>
            </tr>
            <tr>
                <td class='colFY'>FY19</td>
                <td class='norm'>Subject 3</td>
                <td class='norm'>Subject 4</td>
            </tr>
            <tr>
                <td class='colFY'>FY20</td>
                <td class='norm'>Subject 5</td>
                <td class='norm'>Subject 6</td>
            </tr>
        </table>    
    <div class="side">
        REPORTING
    </div>
</div>

附加信息它不仅仅是我遇到困难的旋转，而是“报告”Div 与表格右侧的对齐方式，以及旋转时如何将对齐方式抛出。到目前为止所有的建议都只是如何旋转一个 div，这很好，但并没有解决全部问题。我现在让 div 与表格的右侧对齐，但文本对齐方式和宽度仍然有很大差距。这是我最近的代码片段，请运行该片段以查看当前结果与我正在尝试实现的屏幕截图的对比:

<style>
        .container {
            font-family: 'Open Sans', sans-serif;
            font-size: x-large;
            margin: 0;
            color: black;
            padding: 1em 0.5em;
            font-weight: 900;
        }

        .tableCont {
            float:left;
            width:50%;
        }

        table {
            width: 100%;
            margin-bottom: 0.5em;
            font-size: 1em;
            border-collapse: collapse;
            border-spacing: 0;
        }

            table td {
                border-radius: 15px;
                text-align: center;
                line-height: 100px;
                margin-right:20px;
            }

                table td.colFY {
                    width: 100px;
                    background-color: #887870;
                }

                table td.norm {
                    background-color: #B8B8B8;
                    color: #082860;
                }

        .side {
            float:left;
            background: #B8B8B8;
            padding-top:15%;
            padding-left:10%;
        }

        .vtext {
            
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
            }
    </style>

 <div class='container'>

        <div class="tableCont">
            <table>

                <tr>
                    <td class='colFY'>FY18</td>
                    <td class='norm'>Subject 1</td>
                    <td class='norm'>Subject 2</td>
                    
                </tr>
                <tr><td></td></tr>
                <tr>
                    <td class='colFY'>FY19</td>
                    <td class='norm'>Subject 3</td>
                    <td class='norm'>Subject 4</td>
                    <!--<td rowspan="1" class="vtext side">REPORTING</td>-->

                </tr>
                <tr><td></td></tr>
                <tr>
                    <td class='colFY'>FY20</td>
                    <td class='norm'>Subject 5</td>
                    <td class='norm'>Subject 6</td>

                </tr>
            </table>
        </div>
        <div class="side vtext">
            REPORTING
        </div>
    </div>

再次感谢!

Answer 1

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

****
<th class="rotate"><div><span>Column header 1</span></div></th>

您可以查看此链接:- https://css-tricks.com/rotated-table-column-headers/