テーブルの表示スピードを速くさせる｜web bibo
通常、table要素の属性「width」が定められてない場合、列の幅は内容に応じて決定され表示されますが、表の内容がすべて読み込まれてから列の幅が決められるので、表全体が表示されるのに時間がかかってしまいます。 table-layout: fixed;を指定すると、表の1行目が読み込まれた時点で列幅が決定されるので、表のレンダリング速度を向上させることができます。 CSS記述 table { width: 450px; border: 1px solid #999999; border-collapse: collapse; table-layout: fixed; font-size: 0.8em; line-height: 1.3; } th.property { width: 80px; } th,td { background: #FFEEEE; border: 1px s
dtとddを横並びにしたメニューのサンプル5個｜web bibo
会社概要のページ・個人のプロフィールページ・Q&Aなどにdl,dt,ddを用いた定義リストを良く使います。この定義リストは思うように横並びにならないんですよね。 そこで、試しにいくつかサンプルを作ってみましたので参考にしてみて下さい。個人的にはサンプル4・5がお薦めです。 サンプル1 （borderを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーが途切れる。FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーが途切れる。dtはddの高さに合わせてくれる。 →サンプル 1 サンプル2 （backgroundを使った縦ライン） dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、FireFoxだとddはdtの高さに合わせてくれない。 ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせて
テーブルの行を削除・追加しても、自動的に連番になる方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS テーブル・表 » テーブルの行を削除・追加しても、自動的に連番になる方法 弊サイトにお問い合わせで、テーブルの行を削除または追加しても、自動的に番号を振り直せないかという質問がありましたので、自分なりに考えた結果をご紹介したいと思います。思いついたのはCSSを使った方法とJavascriptを使った方法の2種類です。 CSSを使って連番を振る方法 連番を付けたい箇所にnumberクラスを付けています。 <table class="numbering"> <tr> <td class="number"> </td> <td>あああああああ</td> </tr> <tr> <td class="number"> </td> <td>いい
MOONGIFT: » 絶対お勧め！JavaScriptでテーブルソート「Table Sorter」:オープンソースを毎日紹介
Web開発の現場において、データの並べ替え機能の要望は良く出る話だ。開発がある程度終わった段階で言われたりするとショックを受ける事もある。検索条件をパラメータで引き継いで、ページ番号も…なんて考えただけでも嫌になるだろう。 そんな経験のある、またはこれから経験するであろう方にお勧めのソフトウェアがある。これさえ使えばソート処理は怖くない。 今回紹介するオープンソース・ソフトウェアはTable Sorter、JavaScriptのみで実現するソートライブラリだ。 この手のライブラリはこれまでいくつかあったが、iframeを使ったり、表示に特定の手法が必要だったりと、そのままでは使いづらいものが多かった。Table Sorterはそれらの完成版ともいえるかも知れない。 何せ、読み込むのはJavaScriptファイル一つだけ、さらに普通のテーブルタグに対して、ヘッダ部分はtheadタグとthタグ
スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」:phpspot開発日誌
スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 2007年03月16日- Scrollable HTML table This JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」。 次のようなスクロールしてもカラム名が消えず、小さいスペースで配置できるテーブルを作成できます。 （※↓は画像です） 知っておくと、レイアウトを崩さないでテーブルのようなＵＩ が必要な部分で使えそうですね。 設置方法は次の様に簡単 １．ライブラリを読み込み <script type="text/javascript" src="webtoolkit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス
