表头中的CSS变换调整了标题单元格的大小

Question

我正在尝试在表格单元格中显示旋转的文本。当我使用rotate()时，除非我指定position: absolute，否则表格单元格不会保持其原始宽度。这样，包含文本的div未对齐，如小提琴中所示。

如何将文本显示在表格单元格之外？如何使用固定宽度/高度单元格将其放入表格单元格中？如果没有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然后应用翻译：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;