tableで謎の余白が出来た～原因はthに指定したtransformだった～

tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。

→transformを上のように実装したため、セルの枠内も縮小してしまったらしい。

PC画面上でthとtdが一行に並んでいる時は良いが、レスポンシブで1列にすると問題が露呈した。

結局、transform: none;　にすることで解決できました＾＾

先日書いたtransformの記事と併せて考察してみると、セルの左右に余白を作らずに、かつ文字は長細くしたい、という場合にはth

内に新しくdiv要素などを設けて文字を囲み、そのdiv要素に対してtransformを指定すれば実現可能かもしれない・・・・やってみてないけど。