HTML表

Question

我认为看似微不足道的任务比我预期的要长，并且仍然没有接近解决它。我有一个HTML表格，其中包含一些数据。在表格右侧，我想显示带有一些文字的旋转div，类似于：

我设法创造了我喜欢它的表格，但我不能为我的生活得到报告＆＃34; div在桌子旁边对齐。

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

附加信息 它不仅仅是我遇到困难的轮换，而是＆＃34;报告＆＃34;划分到表的右侧，当旋转时，它如何抛出对齐。到目前为止，所有的建议都只是如何旋转div，这很好，但并没有解决完整的问题。我现在将div与桌子的右侧对齐，但文本对齐和宽度仍然偏离。这是我最新的代码段，请运行代码段以查看当前结果与我要实现的内容的屏幕截图进行比较：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 再次感谢！

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/

Answer 2

只需使用css轮换CSS3 2D Transform：

.side {
  background: #B8B8B8;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

Jsfiddle

Answer 3

http://www.w3schools.com/tags/att_td_rowspan.asp

和

https://css-tricks.com/snippets/css/text-rotation/

＆＃13;

＆＃13;

.vtext {
  
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  }

＆＃13;

<table>
  <tr>
    <td rowspan="4" class="vtext">REPORTING</td>
  </tr>
  <tr>
    <td>FY18</td>
    <td>Subject 1</td>
    <td>Subject 2</td>
  </tr>
    <tr>
    <td>FY18</td>
    <td>Subject 1</td>
    <td>Subject 2</td>
  </tr>
    <tr>
    <td>FY18</td>
    <td>Subject 1</td>
    <td>Subject 2</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;