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

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

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

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

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

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

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

この記事を書いた人