テーブルの表示スピードを速くさせる｜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>いい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートで実装するテーブルのデザインパターンとそのポイント | コリス
