html - 表格标题中的 CSS 转换调整标题单元格的大小

Question

我正在尝试在表格单元格中显示旋转文本。当我使用 rotate() 时，表格单元格不会保持其原始宽度，除非我指定 position: absolute。这样一来，包含文本的 div 就会错位，如 fiddle 所示。

文本怎么可能显示在表格单元格之外？如何使用固定宽度/高度的单元格将其放入表格单元格中？如果没有 position: absolute，我无法让单元格保持固定宽度。

JSFiddle:https://jsfiddle.net/jasoncable/f82h95gp/

代码:

.assignment-table {
  height: 150px;
}

.assignment-table tr {
  height: 150px;
}

.assignment-table tr td {
  width: 50px;
  height: 150px;
  border: 1px solid black;
}

.assignment-table tr td div {
  transform: rotate(-90deg);
  font-size: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
}

<table class="assignment-table">
  <tr>
    <td>
      <div>Grade in Marking Period<br>points/points</div>
    </td>
    <td>
      <div>Assignment 1</div>
    </td>
  </tr>
</table>

Answer 1

您可以调整 transform-origin 然后应用翻译:

.assignment-table {
  height: 150px;
}

.assignment-table tr {
  height: 150px;
}

.assignment-table tr td {
  width: 50px;
  height: 150px;
  border: 1px solid black;
}

.assignment-table tr td div {
  transform: rotate(-90deg) translateX(-50%);
  font-size: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  transform-origin: left top;
}

<table class="assignment-table">
  <tr>
    <td>
      <div>Grade in Marking Period<br>points/points</div>
    </td>
    <td>
      <div>Assignment 1</div>
    </td>
  </tr>
</table>