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」の紹介でした。

CardTabsミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」前のページ

アニメーション付きのサークルプログレスバー「Radial Progress Bars」次のページRadial Progress Bars

関連記事

  1. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  2. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  3. Bootstrap Dropdown Hover
  4. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  5. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  6. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP