CSS 在 Table 中变换 Header 调整大小 Header 单元格

Question

我正在尝试在 table 单元格中显示旋转文本。当我使用 rotate() 时，table 单元格不会保持其原始宽度，除非我指定 position: absolute。因此，包含文本的 div 未对齐，如 fiddle.

中所示

文本怎么可能显示在 table 单元格之外？如何使用固定的 width/height 单元格将其放入 table 单元格中？如果没有 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>

CSS 在 Table 中变换 Header 调整大小 Header 单元格

CSS Transform in Table Header Resizes Header Cell

html

css

css-tables