CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.08.18 ▼2021年最新版 【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウト スマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって table がなかなかやっかいものになってきてますね… 会社概要くらいならまだ良いんですが、情報量が多い table はそのままでは 320px で閲覧した際、なかなか悲惨な事に… 対応方法としては『responsive-table.js』を代表に、様々なやり方がありますが、今回はCSSで出来る事を紹介したいと思います。 目次 2セルの場合の使用した例 横に長い場合 overflow-x と inline-block を使用した例 リスト風にした場合 list-item を使用した例 最後に 2セルの場合の使用した例 2セルでよく作られてる、会社概要やフォームなどで使えるかと思います。 『
テーブルのヘッダを固定 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
ソースコード (X)HTMLファイル ヘッダ固定に直接関係のないidやclassは省略しています。 また、データ部分についても長くなるので省略しています。 <div class="table_header_fixed"> <table cellspacing="0"> <thead> <tr> <th>順位</th> <th>タイトル</th> <th>スタジオ</th> <th class="last">興行成績</th> </tr> </thead> <tfoot> <tr> <td colspan="4" class="last">copyright</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>パイレーツ・オブ・カリビアン/ワールド・エンド</td> <td>ディズニー</td> <td class="last">$961,002,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
