スマホ対応！Markdown形式エディタの表をCSSで最適化する

現状のデザインだとスマホで見た場合にテーブルが左右圧縮されて縦長にみづらくなってしまうため、スマホ対応させて見ようと思います。Markdown形式のエディタを使用しているため，そちらでやりやすい方法になりますが、html形式でも同様の方法で対応可能なはずです。

現状のスマホビュー

どういう方法にしたか

スクロールできるような形に修正しました。CSSに数行足すだけでできるのが嬉しいですが、スクロールすると行名とかがわからなくなってしまうのが難点ではありますね。

th, td {
    text-align: center;
    width: 20%;
    min-width: 130px;
    padding: 10px;
    height: 60px;
}

@media only screen and (max-width: 768px) {
    table {
        display: block;
        overflow-x: scroll;
        white-space: normal;
    }
}

スマホでの見た目

最後に

調べた結果レスポンシブとかカラム名を固定して表示する方法とか他にもいろいろあったのですが、すべての表にユニバーサルに適用できるような方法が欲しかったため，簡便な形で対応しています。

あとレスポンシブにしようとすると全てのtableをsectionタグで囲んだりする必要があり少し手間が...