レスポンシブ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にはメディアクエリを読ませないよ
【初心者向けCSS】レスポンシブな tableを作ってみる | SONICMOOV LAB
お待たせしました！まりぞーですヽ(゜ω゜)ﾉ 今回は CSS 初心者向けです。 table タグがあるじゃないですか。 アレをレスポンシブな感じに実装していこうという内容です。 デモはこちら 使ったものは CSS と HTML とjQuery、そしてコピペです。 よろしくお願いします。 目次 そもそもレスポンシブってなんだっけ Media Queriesの使いかた HTML CSS IE8対応 共通項目 Media Queries まとめ そもそもレスポンシブってなんだっけ responsive 「よく反応する」という意味の形容詞です。 当記事ではブラウザのウィンドウ幅をぐにょんぐにょんいじるとなんか臨機応変に見た目が変わったり変わらなかったりするやつです。 基本的に CSS3 の Media Queries を用いる方法で進めていきます。 Media Queriesの使いかた HTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
