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

问题描述

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

css 只支持 90° with writing-mode: vertical-rl; .

并且使用transform: turn (-90deg);Witout 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;
}

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

标签： htmlcsshtml-table

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

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

问题描述

解决方案

推荐阅读