レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
blog.cuegraphix.com - jQueryのFlexigridを使ってみた
データを簡単にテーブルにフォーマットしてくれるjQuery プラグイン Flexigrid を使ってみた。 Flexigrid http://www.flexigrid.info/ Google Code http://code.google.com/p/flexigrid/ DBから吸い出して管理画面などでさくっとテーブルにしたい場合に非常に便利！ 具体的にどんなことができるのかはマイコミジャーナルさんの記事がわかりやすいのでリンク わずか数行で”ものすごいテーブル”に! – jQueryプラグイン「Flexigrid」 ただこのプラグインあまりリファレンスがない・・・ jsを開けばオプションは一目瞭然なのだが、自分メモとして残しておきます。 オプションパラメータ一覧 UIパラメータ width テーブルの横幅。数値もしくは auto が利用可能。auto に設定した際は横のリサイズは無
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/09/jquery-table.html
