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

使用writing-mode：

写入模式CSS属性定义文本行是水平放置还是垂直放置，以及块进展的方向。

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>