Vivliostyle-CLIで表にキャプションを付ける

見た目にそれほど不自然では無い形で表にキャプションを付けることができるCSSのサンプルです。

本来のtable要素内に記述するcaption要素は使用していないので注意してください。

汎用キャプション

表に限らず使えるキャプションです。

表示結果

ソースコード

<div data-caption="汎用のキャプション">

| 見出し1 | 見出し2 |
|--------|--------|
| 値1    | 値2     |

</div>

/*
 * 汎用キャプション
 */

[data-caption] {
  margin-bottom: 3em;
  page-break-inside: avoid;
  position: relative;
  font-size: 0.85rem;
}

[data-caption]::after {
  content: attr(data-caption);
  text-align: center;
  bottom: -1.5em;
  width: 100%;
  position: absolute;
}

キャプションを上に表示する

表示結果

ソースコード

<div data-caption-top="汎用の上キャプション">

| 見出し1 | 見出し2 |
|--------|--------|
| 値1    | 値2     |

</div>

[data-caption-top] {
  margin-top: 3em;
  page-break-inside: avoid;
  position: relative;
  font-size: 0.85rem;
}

[data-caption-top]::before {
  content: attr(data-caption-top);
  text-align: center;
  top: -1.5em;
  width: 100%;
  position: absolute;
}

表番号付きキャプション

表専用のスタイル定義を作れば表番号を自動的にインクリメントすることもできます。

表示結果

ソースコード

<div data-caption-table="ひとつめのテーブル">

| 見出し1 | 見出し2 |
|--------|--------|
| 値1    | 値2     |

</div>

<div data-caption-table="ふたつめのテーブル">

| 見出し1 | 見出し2 |
|--------|--------|
| 値1    | 値2     |

</div>

/*
 * 表番号付きキャプション
 */

body > section {
  /* Lebel 1の見出し毎に表番号カウンタをリセット */
  counter-reset: table-counter 0;
}

[data-caption-table] {
  margin-bottom: 3em;
  page-break-inside: avoid;
  position: relative;
  font-size: 0.85rem;
  counter-increment: table-counter;
  width: 100%;
}

[data-caption-table]::after {
 /* ここでキャプションの文字列を組立 */
  content: "表" counter(table-counter) " " attr(data-caption-table);
  text-align: center;
  bottom: -1.5em;
  width: 100%;
  position: absolute;
}