表組みにするTABLE要素は、内包する要素をすべてを読み込んでから描画するため表示が遅くなります。

描画速度を早くするには、スタイルシートの「table-layout:fixed」を使います。この「table-layout:fixed」は内容に関係なく列幅が固定されるので、描画速度が早くなります。

複数の表の列幅を揃える時にも有効です。

table-layout:fixedを使用する場合の注意点

• TABLE要素の幅を指定する必要がある
• 列幅を指定しない場合は、すべての列幅が均等になる
• 理由はわかりませんが、Safari、Google Chrome（webkit）では、列幅が指定した値よりも若干狭くなる

HTMLで縦に長い表のときは、見出しを固定（エクセルの「ウィンドウ枠の固定」）して、スクロールできるようにしたい。この動作をCSSだけで実現するようにできたのでメモ。

動作検証ブラウザ

Win：IE6~8、Firefox3.6、Google Chrome8、Safari5
Mac：Firefox3.6、Google Chrome8、Safari5

テーブルのヘッダ／フッタ固定・スクロールできるテーブルを指定できます。（あらかじめセルの幅を決めておく必要があります）

CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。

ただし対応しているブラウザはFireFox3.6, Safari4+, Chrome5+, Opera10.6で、IE6,7,8は対応していません。

しかしながらIEには簡単なJavaScriptで対応することができます。

サンプルはこちら。

このサイトではヘッダ部をCSSで position:fixed;にしています。
これはヘッダ部をスクロールさせたくないからですが、実際に運用してみると問題が発覚。
内部リンク先を表示した際、リンク先がヘッダに隠れてしまうのです。

これをCSSで善処すべく色々試してみて、子セレクタ、隣接セレクタ、属性セレクタの合わせ技で対処することにしました。

以下のCSSです。（少し簡略化しています）

#main > div + div > a[name="more"] {
    display: block;
    height: 1px;
    margin-bottom: 160px;
}

以下に詳しく説明します。

CSS3や透過PNGを未実装のIE用にFilterを使用することがあります。filterはInternetExplorer4から導入された独自機能ですが、調べてみると指定方法が2、3種類あります。

今まであまり深く考えずに使っていたのですが、気になったので検証しました。

作成中のホームページで「ページトップへ戻る」リンクの下に、リンクを追加したところ、IE7、6でアンカーにhoverするとその親要素が伸び縮みするという不具合が起こりました。［サンプルページ１］