表中的90度文字旋转

我想对齐表格顶部的文本，以便使用旋转变换功能垂直显示。虽然我成功旋转表格标题中的单词，但我无法将表格列的宽度缩短为旋转标题的宽度。（如果水平放置，它保持与标题相同的宽度）。此外，我正在使用百分比来指示列宽。表中的90度文字旋转

.vertical-th { 
 
    transform: rotate(-90deg); 
 
}

<table> 
 
    <tr> 
 
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Manuality--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Probability--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Gravity--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Mitigation--> 
 
    </th> 
 

 
    <th colspan="3"></th> 
 
    <th class="vertical-th">Manuality</th> 
 
    <th class="vertical-th">Probability</th> 
 
    <th class="vertical-th">Gravity</th> 
 
    <th class="vertical-th">Mitigation</th> 
 

 
    </tr> 
 
</table>

来源

2016-04-23 Marchese Il Chihuahua

你能创建工作的jsfiddle演示与可能期望结果的屏幕截图？我不清楚：https://jsfiddle.net/Lxw0x2db/ – Aziz

对不起，我是新手。我只是希望那些话; Manuality，Probability，Gravity和Mitigation是并列排列的，但是从页面底部到页面顶部旋转90度。（例如，来自Manualityh的M将从概率等位置旁边到P） –

你能解释为什么需要表吗？是否有可能改变HTML结构？ – Aziz

我们可以通过扭曲标题文本中DIV's和应用上th和一些规则DIV's里面做一些CSS技巧，那么我们就可以得到更多的造型能力，那么我们就可以缩短宽度即使文本很长，也可以使用标题。

一些事情，如：我希望它可以帮助你，谢谢

th, td, table{ 
 
    border:solid 1px; 
 
} 
 

 
div.vertical{ 
 
    margin-left: -85px; 
 
    position: absolute; 
 
    width: 215px; 
 
    transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); /* Safari/Chrome */ 
 
    -moz-transform: rotate(-90deg); /* Firefox */ 
 
    -o-transform: rotate(-90deg);  /* Opera */ 
 
    -ms-transform: rotate(-90deg);  /* IE 9 */ 
 
} 
 

 
th.vertical{ 
 
    max-width: 50px; 
 
    height: 85px; 
 
    line-height: 14px; 
 
    padding-bottom: 20px; 
 
    text-align: inherit; 
 
}

<table> 
 
    <tr> 
 
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Manuality--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Probability--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Gravity--> 
 
    </th> 
 
    <th class="risk-th" style="width: 4%"> 
 
     <!--Mitigation--> 
 
    </th> 
 

 
    <th class="vertical"><div class="vertical">Manuality</div></th> 
 
    <th class="vertical"><div class="vertical">Probability</div></th> 
 
    <th class="vertical"><div class="vertical">Gravity</div></th> 
 
    <th class="vertical"><div class="vertical">Mitigation</div></th> 
 
    </tr> 
 
</table>

来源

2016-04-24 08:35:57

非常感谢你 –

_欢迎你，谢谢。 –

简单易用的方式通过以下概念创建旋转表头。

$(function() { 
 
    var header_height = 0; 
 
    $('.rotate-table-grid th span').each(function() { 
 
     if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth(); 
 
    }); 
 

 
    $('.rotate-table-grid th').height(header_height); 
 
});

table.rotate-table-grid{box-sizing: border-box; 
 
border-collapse: collapse;} 
 
.rotate-table-grid tr, .rotate-table-grid td, .rotate-table-grid th { 
 
    border: 1px solid #ddd; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 
.rotate-table-grid th span { 
 
    transform-origin: 0 50%; 
 
    transform: rotate(-90deg); 
 
    white-space: nowrap; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="rotate-table-grid"> 
 
    <thead> 
 
     <tr> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
      <th><span>Shorter Title</span></th> 
 
      <th><span>Much Much Longer Title</span></th> 
 
     </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
     <td>Cell</td> 
 
    </tr> 
 
</tbody> 
 
</table>

来源

2017-10-05 06:54:13 santoshK

表中的90度文字旋转

回答

相关问题