no-image

JavaScript

スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

Mobile-Friendly Tableはスマホなどのモバイルに最適なテーブルを実装できるのが特徴です。jQueryが使われています。レスポンシブに対応し、パソコンからスマホまで様々なデバイスで見やすいテーブルを実装できます。

Mobile-Friendly Table

Mobile-Friendly Table

デモではパソコンから閲覧すると一般的なテーブルレイアウトになっていますが、ブラウザ幅を縮小していくとモバイルに最適なレイアウトに切り替わります。

Company、Location、Descriptionと横に並べられた情報が縦になり、スマホのような画面が狭いデバイスでも見やすいレイアウトになります。

モバイル版になったからといって得られる情報が少なくなるといったこともなく、パソコンとモバイル両方で共通した情報を得られるのがいいですね。

テーブルを多用するサイトで、スマホでもパソコンでも最適なレイアウトでテーブルをユーザーに見せたい人は、ぜひ「Mobile-Friendly Table」をチェックしてみてください。

というわけで、レスポンシブに対応したモバイルフレンドリーなテーブルを実装できる「Mobile-Friendly Table」の紹介でした。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  2. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  3. NO IMAGE

    JavaScript

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

  4. jQuery plugin Watermark
  5. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP