Captions and DataTables

2020年1月27日

この記事は約 4 分で読めます。

4.5

DataTables は
caption要素を完全にサポートしており、
必要に応じてテーブルにコンテキストを
追加するために使用する事ができます。

<caption>タグは、
テーブル（表）に
キャプションをつける際に使用します。
キャプションとは
表のタイトルや説明のことです。

一般的なブラウザでは、
キャプションはテーブルの
上部に表示されますが、
CSSの caption-side プロパティで
表示位置を指定することができます。

ここでは、
HTML table タグに記述ではなく、
Javascript codeに記述する方法です。

Append a caption

DataTables の初期化の前に
テーブルにキャプションを追加します。

$(function () {
  $('#table_id7').append('<caption style="caption-side:bottom;text-align:right;">Data from Luna\'s blood test report</caption>');
  $("#table_id7").DataTable({
    lengthChange: false,
    searching: false,
    ordering: false,
    info: false,
    paging: false,
    responsive: true
  });
  var myCptn = '<caption style="caption-side:top;">CSS property: <a href="https://caniuse.com/#search=caption-side" target="_blank" rel="noopener noreferrer">caption-side</a></caption>';
  $('#table_id8').append('[' + myCptn + ']');
  $("#table_id8").DataTable({
    lengthChange: false,
    searching: false,
    ordering: false,
    info: false,
    paging: false
  });
});

Result

以下の例では
figcaption 要素と併用して
表示しています。

<figure>
  <figcaption>※ <code>caption-side:bottom</code></figcaption>
  <table id="myTable" class="display compact nowrap" style="width:100%;">
    <thead> ... </thead>
    <tbody> ... </tbody>
  </table>
</figure>

※ caption-side:bottom

ルナの血液検査結果	退院時	検査 (前比)	再検査 (前比)	今検査 (前比)	正常域
RBC (10⁶/㎕)	4.51	3.82 (⤵)	3.50 (⤵)	4.33 (⤴)	5.50-8.50
Hgb (g/dL)	6.7	5.4 (⤵)	5.1 (⤵)	6.6 (⤴)	10-15
Hct (L%)	22.0	17.5 (⤵)	16.3 (⤵)	20.0 (⤴)	32-40