MiddlemanのKramdownで生成した横長のtableを横スクロールさせる方法

middleman

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 |
|------------|:--------:|:-------------------:|:---------------:|
|費用        |![4点](review_4.gif)| ![3点](review_3.gif) | ![2点](review_2.gif) |
|導入のしやすさ|![2点](review_2.gif)| ![5点](review_5.gif) | ![5点](review_5.gif) |
|パフォーマンス|![5点](review_5.gif)| ![3点](review_3.gif) | ![3点](review_3.gif) |
|省電力性     |![3点](review_3.gif)| ![4点](review_4.gif) | ![3点](review_3.gif) |
|Macとの統合  |![2点](review_2.gif)| ![5点](review_5.gif) | ![3点](review_3.gif) |
|NASとの連携  |![4点](review_4.gif)| ![2点](review_2.gif) | ![4点](review_4.gif) |
|===
|合計        | 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 |
|------------|:--------:|:-------------------:|:---------------:|
|費用        |![4点](review_4.gif)| ![3点](review_3.gif) | ![2点](review_2.gif) |
|導入のしやすさ|![2点](review_2.gif)| ![5点](review_5.gif) | ![5点](review_5.gif) |
|パフォーマンス|![5点](review_5.gif)| ![3点](review_3.gif) | ![3点](review_3.gif) |
|省電力性     |![3点](review_3.gif)| ![4点](review_4.gif) | ![3点](review_3.gif) |
|Macとの統合  |![2点](review_2.gif)| ![5点](review_5.gif) | ![3点](review_3.gif) |
|NASとの連携  |![4点](review_4.gif)| ![2点](review_2.gif) | ![4点](review_4.gif) |
|===
|合計        | 20 | 22 | 21 |
{:.afi_table}
</div>

参考

羊毛や小麦