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プロパティの値を再確認しよう。
これは自戒である。