logo标签列表

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

htmlcsshtml-table
6
我尝试创建带有顶部和左侧标题的经典HTML表格。现在我想通过-90°旋转左侧标题中的文本。
仅使用CSS支持90°，可以使用writing-mode: vertical-rl;。
并且使用transform: turn(-90deg);，如果没有position: absolute;，则它将无法随着表格变长而动态适应。
我发现：How can I control the width of a table header cell that contains rotated text? 但是某种方式需要根据标题长度调整left:。
-
有没有办法使左侧标题中的
元素与元素的高度一样宽而宽，并适合其中而不影响此内容？
文本也应该在一行上，而不换行，并具有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>

1
可能是CSS中旋转元素正确影响其父元素高度的重复问题。 - Nick Parsons
@Nick Parsons，几乎了解了，标题td宽度受文本长度的影响。我希望最大宽度为35px。 - Silvan
1个回答
5

您可以使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接