6ヶ月前に投稿

Captions and DataTables

この記事は約 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
Chrome Firefox IE,Edge Safari Opera
4+ 2+ IE 8+ Edge 12+ 3.1+ 10+
caption-side:top

まぁ、
HTML table タグに直接記述すれば
済む話なのですが、
このような方法もありますよ
って言う備忘録です。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Captions and DataTables