How can I properly rotate a text inside a table cell

Question

I tried to create a classic HTML table with a title top and left. Now I want to rotate the text in the left title by -90°.

Css only supports 90° with writing-mode: vertical-rl;.

And with transform: turn (-90deg); Witout position:absolut; it will not fit dynamically as the table gets longer.

I found : How can I control the width of a table header cell that contains rotated text?

But somehow left: needs to be adjusted depending on the length of the title.

-

Is there a way to get the <div> element in the left title as high as wide and as wide as the height of the <td> element is without affecting this and fit in it?

The text should also be on one line, Without wrapping and with overflow:hidden; that means the max-height should be defined by the table not by the length of the text inside the left title.

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>

Possible duplicate of [Rotated elements in CSS that affect their parent's height correctly](https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly) — Nick Parsons, Apr 25 '19 at 12:57
@Nick Parsons Almost, the title td width is affecting by the length of the text. I want that the max-width is 35px. — Silvan, Apr 25 '19 at 14:10

score 4 · Accepted Answer · answered Apr 25 '19 at 13:01

You can use writing-mode: vertical-rl; combined with a scale transformation:

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>

How can I properly rotate a text inside a table cell

1 Answers1

Linked

Related