Captions and DataTables
この記事は約 4 分で読めます。
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 |
まぁ、
HTML table タグに直接記述すれば
済む話なのですが、
このような方法もありますよ
って言う備忘録です。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません