flexやgridばかり使ってた

IE11以降、そして、autoprefixerを使っていると、あまりブラウザの差異を考えずに、
flexやgridを多用していて、display:tableなんて使わなくなっていたけど、
久しぶりに汎用的なcssスタイリングをするにあたり、
項目名と値のテーブル的なレイアウトのものが来た時に、
項目名の幅を揃えたいけど、mobile(SP)表示ではテーブルレイアウトじゃなくしたいなんて、
デザイナーが言うもんだから、困った。

[display:table] > [display:table-cell]ばかりだと思ってた。

どこでどう間違えたか、[display:table]直下には[display:table-cell]か、くらいかと思ってた。

[display:table-row]が存在してた。

すっかり忘れた。

でも、そもそも、セマンティックな考えなら、tableタグ使えばよくない？

そうなんだけどね。
でも、デザイナーの中にはhtmlやcssの概念をいまいちちゃんと理解できない人がいるから、項目と値の関係性が崩れたデザインをdesktopとmoblieで分けてくることがある。

教訓

迷ったら、使い慣れたcssプロパティの値を再確認しよう。

これは自戒である。