html - css如何对齐标题旋转表

Question

我需要用 css 旋转标题表并将所有文本放在一起 这是我的 CSS

th.rotate {
  height: 100px;
  white-space: nowrap;
}

th.rotate>div {
  transform: rotate(-90deg);
}

       
  			<th class="rotate"><div>Tintoria</div></th>
                    <th class="rotate"><div>Mag.Tops</div></th>
                    <th class="rotate"><div>Mag.Filati</div></th>                            
                    <th class="rotate"><div>Orditura</div></th>
                    <th class="rotate"><div>Tessitura</div></th>
                    <th class="rotate"><div>Ramm./Contr.</div></th>
                   

现在这是结果

我的问题是:我怎样才能将按钮之间的所有空格减少到 0？？？

我的目标是:enter image description here

Answer 1

使用书写模式:

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.

^MDN

th.rotate {
  white-space: nowrap;
}

th.rotate div {
  height: 100px;
  padding: 0.25em;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  border: 1px solid grey;
  border-radius: 4px;
  background: #ccc;
}

<table>
  <th class="rotate">
    <div>Tintoria</div>
  </th>
  <th class="rotate">
    <div>Mag.Tops</div>
  </th>
  <th class="rotate">
    <div>Mag.Filati</div>
  </th>
  <th class="rotate">
    <div>Orditura</div>
  </th>
  <th class="rotate">
    <div>Tessitura</div>
  </th>
  <th class="rotate">
    <div>Ramm./Contr.</div>
  </th>
</table>