如何正确旋转表格单元格内的文本答案

【问题标题】：How can I properly rotate a text inside a table cell如何正确旋转表格单元格内的文本
【发布时间】：2019-04-25 22:14:55
【问题描述】：

我尝试创建一个带有顶部和左侧标题的经典 HTML 表格。现在我想将左侧标题中的文本旋转 -90°。

Css 仅支持 90° 和 writing-mode: vertical-rl;。

而transform: turn (-90deg); Witout position:absolut; 随着桌子变长将无法动态适应。

我找到了：How can I control the width of a table header cell that contains rotated text?

但不知何故left:需要根据标题的长度进行调整。

有没有办法获取左侧标题中的<div> 元素与<td>元素的高度一样宽和一样宽不影响这个并适合它？

文本也应该在一行上，不换行并且带有overflow:hidden;，这意味着最大高度应该由表格定义，而不是由左标题内的文本长度定义。

table {
  text-align: left;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid lightgrey;
  padding: 0px 3px;
}

td:not(:first-child) {
  min-width: 140px;
}

.table_title_top {
  text-align: center;
}

.table_title_left {
  text-align: center;
  width: 35px;
}

.table_title_left div {
  display: flex;
  position: absolute;
  flex-wrap: nowrap;
  text-align: center;
  transform: rotate(-90deg);
  height: 35px;
  left: 0px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td></td>
        <td colspan="100" class="table_title_top">
          <div>Title Top Title Top</div>
        </td>
      </tr>
      <tr class="calc-tr calc-tr-title">
        <td rowspan="100" class="table_title_left">
          <div>Title Left Title Left</div>
        </td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【问题讨论】：

Rotated elements in CSS that affect their parent's height correctly的可能重复
@Nick Parsons 几乎，标题 td 宽度受文本长度影响。我希望最大宽度为 35px。

标签： html css html-table

【解决方案1】：

您可以将writing-mode: vertical-rl; 与比例转换结合使用：

table {
  text-align: left;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid lightgrey;
  padding: 0px 3px;
}

td:not(:first-child) {
  min-width: 140px;
}

.table_title_top {
  text-align: center;
}

.table_title_left {
  text-align: center;
  width: 35px;
}

.table_title_left div {
   writing-mode: vertical-rl;
   white-space:nowrap;
   transform:scale(-1);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td></td>
        <td colspan="100" class="table_title_top">
          <div>Title Top Title Top</div>
        </td>
      </tr>
      <tr class="calc-tr calc-tr-title">
        <td rowspan="100" class="table_title_left">
          <div>Title Left Title Left</div>
        </td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
      <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：