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° wit

Answer 1

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);
}

  



  

    

      

        

        

          
Title Top Title Top
        
      
      

        

          
Title Left Title Left
        
        
0
        
0
        
0
      
      

        
0
        
0
        
0
      
      

        
0
        
0
        
0