Markdownで表の幅を調節する方法

Markdownには表の幅を調節する機能がありません.レンダーにもよると思いますが,たとえばHexoのデフォルトのレンダラーでは表の幅が全体に広がってしまい場合によっては不格好です.

無理やり空白を入れて幅を広める方法はあるみたいですが,幅を縮める方法がなかなか見つからなかったのでメモしておきます.

普通の表

例えばこのように記述すると,

1
2
3
4
5
| col1 | col2  |
| :--- | :---: |
| hoge | 1 |
| fuga | 0 |
| poyo | 2 |

こうなります.

col1 col2
hoge 1
fuga 0
poyo 2

各行の内容が少ないのにもかかわらず幅をとってすごく見づらいですね.
markdownはhtmlが使えるので<table>タグでwidthを指定しようとするとそれ以降の内容もhtmlで書かなくてはならないので非常に不便です.

対策

今回は<style>タグを利用してクラスごとに<table>widthを指定します.<style>タグは本来,<head>内に書くものですが,少なくともmarkdownの場合は本文中でも動くようです.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.uooo table {
width: 40%;
margin: auto;
}
</style>

<div class="uooo">

| col1 | col2 |
| :--- | :---: |
| hoge | 1 |
| fuga | 0 |
| poyo | 2 |

</div>

col1 col2
hoge 1
fuga 0
poyo 2

これでうまく調整できました.なお,divwidth属性に直接設定しても変更ができなかったので,これが無難かと思われます.