参考までに 使用したHTMLは次のとおりです

まあ、スマホ専用サイトなんだったらHTML側を変更すればいいじゃないかって話なんですが、中にはちょっとした事情でHTML側はなるべく編集を加えないほうが好ましい案件もあったり、または、CSSだけで対応できるならばそのほうが効率的だったり、ということもあります。

参考までに、使用したHTMLは次のとおりです。

HTML/CSSを覚え立ての頃、tableタグの存在を知って、あれこれ使ってました。 Akira氏にも質問したりして、その節は度々お世話になりました。 今はflexboxとか、画像+文章の場合はfloatを使ってますが。 記事で書かれてる中心の話題とは別に、物理とか私の大好きな電子工作の様な、縦横に数項目が必要な表が出て来る場合、見易いのは絶対tableタグの表です。 で、スマホ上で画面上に収ってくれるように、項目の見出しを縦に並べるのか横に並べるのが良いのかとか、欧文フォントの横幅が狭いのを捜したり（今のところGoogleFontsのRobot）、font-sizeを小さくしたり。 Akira氏が書かれているように、tableも画面の横幅をどんどん狭めていくと、セルも狭まっていきますが、数式の代数や変数の文字列が折り返されては何のことか判らなくなるので、それなりに最低限の横幅が必要です。 結局 overflow-y: hidden でtableの部分だけ横スクロールで見れるようにするのですが、Firefoxではどうやってもスクロールバーの常時表示が出来ない。 スマホ対応では、tableが持ってる本来の（エクセルの様な）表の表示はきついです。 条件毎に箇条書きにするのかとかの全く違う表現が必要なのかなと思ったりして。 あれこれ考えるのも結構楽しいのではありますが、すんません、感想文の投稿、ご容赦。