レスポンシブウェブデザイン案件でtableの見た目を大きく変える
大きく変化するようなデザインにしないでください、と思うのですがあるんですよねー、たまに。 というわけでここに置いてあります。 640pxよりブラウザサイズが小さくなるとスマホ相当の画面になります。 何が起きているかと言いますと、PCではtheadの見出しセルとtbodyの見出しセルがありマトリックスな感じの表になっています。 それがスマホでは、PCの1行相当にあたる情報が1ブロックとなり、PCではtbodyの見出しセルがブロックの見出しに昇格し、PCのtheadの見出しセルがtbodyの見出しセルになるという感じになっていますね。 さらにcolspanになってる部分がスマホではrowspanのようになっていて鬼畜だなーと思った方もいらっしゃるかもしれません。 他のブログなどのレスポンシブウェブデザインでのテーブルと同じく、メディアクエリを利用してdisplayの値をゴニョゴニョ切りかえてお
3ステップで表をソート＆値を検索できるjavascript「dataTables」
twitter facebook hatena google pocket サイト制作でよく使用するものの一つにテーブルで作成する表だと思います。 しかし、その整理方法は面倒で、縦に長くなると見づらくなります。 今回紹介するDataTablesはjQueryを使い簡単に表をソートさせたり、値を検索したり、表示する項目数を調整できます。 sponsors 使用方法 非常に簡単に導入できます。 [ STEP1 ] DataTablesからjquery.dataTables.jsをjQueryからjquery.jsをダウンロードします。 [ STEP2 ]< 以下のようにhead内に記述します。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build a Responsive Pricing Table with Neat Hover States | Envato Tuts+
IDEA * IDEA
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス
