Otama's Playground

AIで遊んだ結果などをつらつら載せていきます。

スマホ対応!Markdown表のデザインと最適化方法

現状のデザインだとスマホで見た場合にテーブルが左右圧縮されて縦長にみづらくなってしまうため、スマホ対応させて見ようと思います。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タグで囲んだりする必要があり少し手間が...