tableをcssでレスポンシブにしたいのに横に並ぶし、overflow-x:scroll;が対応してくれない。
どうも、モモヒコの桃です。
tableをレスポンシブにしようとして本を見ながらやってみた。
やっと完成した〜〜〜〜〜〜〜！！！！！
って思い、iPhoneでもちゃんと見れるかなとBliskで確認したらあらまあ不思議。
全く出来てない。
GoogleChromeではちゃんと対応して見れたんだけどSafariとBliskではなぜかblock要素が効いていないのか、tableのtd要素が横一列に並んじゃう。
こらまいった。
結局、htmlに書き足してweb用とタブレット・スマホ用にdisplay:none;で調節しました。
解決方法をこれから見つけていかなければ。
また、情報量がとーーーーーーーーーーーーーーーーっても多いtableがあってどうレスポンシブにしたら良いかわからなかったから、
white-space: nowrap;
overflow-x: scroll;
display: block;
width: 100%;
横にスクロール出来るようにした！！！！！！！
うわ〜〜できた〜〜〜〜〜と思ったが、さっきのこともあったのでそんなに喜ばすBliskで確認。
はい、できてない。
なんで？
調べてみると出来る人と出来ない人がいるらしく、MacBook Proだとできないらしい。
これで対応させるには、
transform: translateZ(0);
をそのtableに入れるか、それでも適応されなかったらbodyに入れてみると出来るようになる。
これでも出来ない。
朝出なおしてもっかい調べてみた。
このサイトのDEMOをBliskでみてみたら対応してた！！
だから今からここのコードを真似して書いてみようと思う。
がんばるか〜〜〜〜〜
