Question

我有一张桌子。顶部标题列具有垂直文本。为此，我使用了transform：rotate（-90deg）。垂直标题应该是单行的。但即使有空白顶部和顶部，它似乎不止一条线。底部。我真的不知道要避免......

<table cellspacing="0" cellpadding="0" border="0" class=" verticaltext_table" >
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th><div>Some Big Titles Goes Here</div></th>
                <th><div>Some Big Titles Goes Here</div></th>
                <th><div>Some Big Titles Goes Here</div></th>
                <th><div>Some Big Titles Goes Here</div></th>
                <th><div>Some Big Titles Goes Here</div></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Some Left side titles goes here</td>
                <td>Val 1</td>
                <td>Val 2</td>
                <td>Val 3</td>
                <td>Val 4</td>
                <td>Val 5</td>
            </tr>
        </tbody>
    </table>


.verticaltext_table {
    width:100%;
  border-collapse: collapse;
}
.verticaltext_table thead th 
{
    height:250px;
}
.verticaltext_table thead th div {
   -moz-transform: rotate(-90deg);  /* FF3.5+ */
   -o-transform: rotate(-90deg);  /* Opera 10.5 */
   -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
   vertical-align: top;
   padding: 10px 0;
   /*white-space:nowrap;*/
} 
.verticaltext_table th {

}
.verticaltext_table td, .verticaltext_table th {
  padding: 10px;
  text-align: center;
  border: solid 1px #999;
}
.verticaltext_table thead tr
{
    background:#f2f2f2;
}

这是我的https://jsfiddle.net/wv2mrym6/2/

提前致谢

Answer 1

使用white-space: nowrap;会将文字强制插入一行。

面对表标题垂直文本的问题

1 个答案: