MiddlemanのMarkdownパーサーにKramdownを使っていて便利なのがテーブル。
でも、横長になりすぎた時や、スマホで見た時、横にはみ出してしまうんですよね。
もくじ
スマホだとテーブルが右にはみ出してしまう
これはスマホで見たときの画像。右がはみ出していますよね。
テーブルをdivタグで囲う
これを横スクロールされるようにするためには、table要素をとあるclassがついたdivで囲ってあげる必要があります。（1行めと13行目がdivタグ）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="scroll"> | | Bootcamp | Parallels Desktop 11| VMware Fusion 8 | |------------|:--------:|:-------------------:|:---------------:| |費用 ||  |  | |導入のしやすさ||  |  | |パフォーマンス||  |  | |省電力性 ||  |  | |Macとの統合 ||  |  | |NASとの連携 ||  |  | |=== |合計 | 20 | 22 | 21 | {:.afi_table} </div> |
parse_block_htmlオプションを設定
ただ、Kramdownはデフォルトだとブロック要素で囲われたmarkdown記法をエスケープしてしまい、ただの文字列になってしまします。
なので、きちんとブロック要素内もHTMLに変換してくれるようオプションを設定する必要があります。 config.rbに以下を追記してください。
|
1 2 |
set :markdown_engine, :kramdown set :markdown, parse_block_html: true |
クラスにCSSを適用
先ほどdivにつけていた scrollクラスに以下のようなCSSを適用させてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.scroll{ overflow: auto; white-space: nowrap; } .scroll::-webkit-scrollbar{ height: 5px; } .scroll::-webkit-scrollbar-track{ background: #F1F1F1; } .scroll::-webkit-scrollbar-thumb{ background: #BCBCBC; } .scroll table{ width:100%; } |
すると下の画像ように横スクロールバーが表示されスクロールできるようになります。
config.rbをいじりたくない場合
config.rbにオプションを設定すると、全ての記事で適用されてしまいます。部分的にオプションを適用させたい場合は、以下のように直接Markdown内にオプションを書くことができます。（1行目）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{::options parse_block_html="true" /} <div class="scroll"> | | Bootcamp | Parallels Desktop 11| VMware Fusion 8 | |------------|:--------:|:-------------------:|:---------------:| |費用 ||  |  | |導入のしやすさ||  |  | |パフォーマンス||  |  | |省電力性 ||  |  | |Macとの統合 ||  |  | |NASとの連携 ||  |  | |=== |合計 | 20 | 22 | 21 | {:.afi_table} </div> |
参考
- Jekyll: How to get markdown parsing inside blocks using Kramdown?
- スマートフォン表示で、はみ出したtableを横スクロールさせるためのCSS
