html - 表格中的 90 度文本旋转

Question

我正在尝试对齐表格顶行中的文本，以便它使用旋转变换功能垂直显示。虽然我成功地旋转了表头中的单词，但我无法将表列的宽度缩短为与旋转标题的宽度相同。 (如果它被水平放置，它会保持与标题相同的宽度)。另外，我使用百分比来表示列宽。

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

Answer 1

使用以下概念创建旋转表头的简单方法。

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