今日の人気記事

  1. スクロールしてもついてくる要素を指定「Sticky-kit」
  2. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  3. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  4. レスポンシブな折りたたみメニュー「Naver」
  5. ソート・フィルター・ページャー付きのテーブル「Datatable」

テーブルをレスポンシブ対応に「rt Responsive Tables」

スポンサーリンク

テーブルをレスポンシブ対応にしてくれるプラグイン「rt Responsive Tables」を紹介します。

jQueryプラグイン「rt Responsive Tables」

このプラグインを使えば、レスポンシブ・デザインのひとつの問題点であるテーブルをうまいことレスポンシブにしてくれます。

また、レスポンシブ ON/OFF を設定するブレイクポイントとして、ブラウザーの幅を指定することもできます。

スポンサーリンク

それではデモページのテーブルをご覧ください。

「rt Responsive Tables」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="rt Responsive Tables のデモでーす。">
<title>rt Responsive Tables - jQueryプラグイン</title>
<link rel="stylesheet" href="jquery.rtResponsiveTables.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.rtResponsiveTables.min.js"></script>
</head>
<body>
<h1>rt Responsive Tables のデモでーす。</h1>
<p>ブラウザーの幅を縮めてみてください。</p>
<table>
  <thead>
  <tr>
    <th>タイトル 1</th>
    <th>タイトル 2</th>
    <th>タイトル 3</th>
    <th>タイトル 4</th>
    <th>タイトル 5</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>アイテム 1</td>
    <td>アイテム 2</td>
    <td>アイテム 3</td>
    <td>アイテム 4</td>
    <td>アイテム 5</td>
  </tr>
  <tr>
    <td>アイテム 6</td>
    <td>アイテム 7</td>
    <td>アイテム 8</td>
    <td>アイテム 9</td>
    <td>アイテム 10</td>
  </tr>
  <tr>
    <td>アイテム 11</td>
    <td>アイテム 12</td>
    <td>アイテム 13</td>
    <td>アイテム 14</td>
    <td>アイテム 15</td>
  </tr>
  </tbody>
</table>

<script type="text/javascript">
$("table").rtResponsiveTables({
    containerBreakPoint: 600
    });
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)