Question

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

在transform: turn (-90deg);的{{1}}中，随着表格的增加，它不会动态地适应。

我发现：How can I control the width of a table header cell that contains rotated text?

但是position:absolut;需要根据标题的长度进行调整。

-

是否有一种方法可以获取左侧标题中的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;
}

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

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

1 个答案: