CSSのみでレスポンシブ対応したテーブルデザインを作る３つの方法 | Neganin(ネガニン)
Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary
jQueryプラグイン - テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」 - Webkaru
テーブルのヘッダーを固定してデータ行をスクロール表示にするプラグイン「tbodyScroll」を紹介します。 jQueryプラグイン「tbodyScroll」このプラグインを使えば、テーブルのヘッダーとフッターを固定してtbody部分にスクロールバーを加えることができます。 オプションではテーブルのヘッダー・フッター・ボディ部分の高さ、ヘッダー・フッター部分のカラーを指定することができます。 tbody部分のデータ行が長いテーブルに便利ですね。 デモのテーブルをご覧ください。 「tbodyScroll」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="tbodyScrollのデモでーす。"> <title>tbodyS
jQueryプラグイン - ExcelのようにTableを編集 - Handsontable
ExcelのようにTableが編集できちゃうjQueryプラグイン「Handsontable」を紹介します。 jQueryプラグイン「Handsontable」jQueryプラグイン「Handsontable」は、HTMLのTableをページ遷移することなく動的に編集できるようにするプラグインです。 そう、まるでExcelのように。 これがなかなか使い勝手がいいんです。指定した要素が編集できちゃう「trocar.js」というプラグインもあるので合わせてご覧ください。 デモでTableを編集してみてください。セルをダブルクリックするとセル内のテキストを編集でき、グリッドの右下ポインタをドラッグするとコピーまでできる優れもの。すげー。 「Handsontable」のデモ ソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset=
レスポンシブ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にはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Tables, for Bootstrap 5
