スクロールが生じたtableの左右上下の列や行などを固定出来るスクリプト・「TableHeadFixer」TableHeadFixerはtableのヘッダーやフッター、左や右の列を固定できるスクリプトです。jQueryに依存します。スクロールが生じたtableで重要な個所を固定する事でユーザーのスクロール頻度を抑える目的にあいそう。ヘッダ固定はよく見かけましたがデモのように左+ヘッダの固定等、応用が利くのは良いですね。固定方法は、上下はtrue/false指定、左右は1なら1列目、2なら1～2列までを固定します。 TableHeadFixer
CSS：角丸のテーブルを作成する方法 - NxWorld
テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて
jQueryのDataTablesプラグインを使ってみた - ichhiの日記
DataTablesプラグインとは tableタグを装飾してくれるjQueryプラグイン。 http://www.datatables.net/ 他のtableタグを装飾してくれるプラグイン 「Flexigrid」 http://flexigrid.info/ 「Ingrid」 http://www.reconstrukt.com/ingrid/index.html ちなみに、これらを知った経緯は「jquery table」でググって出てきた この記事を見たから。 http://www.designwalker.com/2009/09/jquery-table.html どうしてこのプラグインを選んだか サンプルプログラムやAPIなどがまとめられており、ドキュメントがしっかりしているから。 これに尽きる。 Flexigridは機能は良いが、ドキュメントが見つからなかったので使用をやめた。
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
スマホサイトでtd/th要素へのposition:relativeはダメ！
スマホサイトでtd/th要素へのposition:relativeはダメ！ iOS4.x系やAndroid2.x系のブラウザだとtd/th要素に指定したposition:relativeが無視されます。 また、td/th要素以外にもdisplay:table-cellを指定した要素へのposition:relativeの指定は無視されます。 セルの内側の要素をabsoluteを使って自由配置したい場合は、内側にdivを一個かましてそいつにposition:relativeを指定するのがよろしいかと思います。 <table> <tr> <td> <div>cell1</div> </td> <td> <div>cell2</div> </td> </tr> <tr> <td> <div>cell3</div> </td> <td> <div>cell4</div> </td> </tr> <
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
レスポンシブ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にはメディアクエリを読ませないよ
[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス
leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量（1.7KB）のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
[JS]ソートできるテーブルを実装するスクリプト10選 | コリス
単独使用のものから、jQueryなどのライブラリ併用まで、数値や文字・画像をソートできるテーブルを実装するスクリプト10選です。
MOONGIFT: » 絶対お勧め！JavaScriptでテーブルソート「Table Sorter」:オープンソースを毎日紹介
Web開発の現場において、データの並べ替え機能の要望は良く出る話だ。開発がある程度終わった段階で言われたりするとショックを受ける事もある。検索条件をパラメータで引き継いで、ページ番号も…なんて考えただけでも嫌になるだろう。 そんな経験のある、またはこれから経験するであろう方にお勧めのソフトウェアがある。これさえ使えばソート処理は怖くない。 今回紹介するオープンソース・ソフトウェアはTable Sorter、JavaScriptのみで実現するソートライブラリだ。 この手のライブラリはこれまでいくつかあったが、iframeを使ったり、表示に特定の手法が必要だったりと、そのままでは使いづらいものが多かった。Table Sorterはそれらの完成版ともいえるかも知れない。 何せ、読み込むのはJavaScriptファイル一つだけ、さらに普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ホームページ作成ガイド/IEで最大幅、最小幅（TABLE） - TAG index Webサイト