表中的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度文字旋轉

回答

相關問題