昨日（タブ区別りテキストをHTMLテーブルに変換するJavaScript）の補足で、横罫線だけの論文風?テーブルをHTMLとCSSで作った手順のメモ。途中からCSS3の疑似クラスのlast-childとnth-childも使用。「擬似」が正しい漢字かもしれないけど、今回参照した ↓ のように「疑似」表記も多いです。実行環境はWindows7 32bit + Firefox38。
» Mozilla Developer Network : 疑似クラス (Pseudo-classes)
元テーブル（HTMLタグのみ）
昨日と同じデータを使い、TR、TH、TDタグで「データ構造」だけを表したもの ↓ です。HTMLの下が実際の表示（インラインフレーム）。ブラウザのデフォルトスタイルによって結果が違いますが、Firefox38では罫線がなくヘッダが太字になるだけ。
以下、このHTML本体（BODY）は変えず、先頭（HEAD）にCSSのSTYLEタグを付けることでHTMLテーブルの外観を段階的に変更。ブラウザの幅が狭いとテーブルの折り返しが多くなって見にくいかも。テーブルは全てインラインフレームなので、別窓でも開けます。
例2 : 全セルにシンプルな罫線を付ける
テーブル全体をborder-collapse: collapseにし、TH・TDタグ共通のborderスタイルを設定するだけ。
例3 : 横罫線だけにする
上の例のTH・TDをTRタグに変え、罫線スタイルを色・形・線幅に分け、縦方向の線幅をゼロに設定。
例4 : 横罫線を、ヘッダとテーブル下端だけにする
このへんから少し論文風? 横罫線を、ヘッダの上下およびテーブル下端だけに。データ部分の行間を空けないと見にくいけど、とりあえずここでは線スタイルだけ変えます。TH・TR共通のスタイルを記述した上で（線幅はゼロに。これを忘れると結果が変）、THに上下の線幅を、最後のTRに下だけの線幅を設定。
この「最後のTR」を指定するのに、CSS3の疑似クラスからlast-childを使用。今回参照したMozilla Developer Networkには載ってませんが、少なくともFirefox38ではnth-last-child(1)と同じ働きをするようです。
例5 : 横罫線のスタイルを少し変える
上でやり残したデータ部の行間を空け（実際はセル内の上下パディングを設定）、テーブル上下は太い線、ヘッダとデータの間は細い二重線にして整えました。THタグなど、このへんから記述が少し増えます。なおIE10では、二重線の内部に色が塗られる変な結果になりました。
例6 : 横罫線とデータ行の間隔を調整
だいたい整いましたが、データ先頭行と上の罫線、またデータ最終行と下の罫線との近さが気になるので、間隔を空けます（上との違いを分かりやすくするため、間隔を多めにした）。データ先頭行はTR要素の2番目に当たり、CSS3の疑似クラスのうちnth-childを使用。特定の行の各セルにパディングを設定する際、TR直下の全TD要素を「tr:疑似クラス > td」で抽出します。
例7 : 特定の列だけスタイルを変える
これで最後。今まで行（縦）方向の空きだけ調整しましたが、列（横）方向にも間隔を空けます。また数字一桁の列のみ、中央揃えに。この「特定の列」だけスタイル設定する際、nth-child(■n+■)という記述を使用。今回は列数が6で、左から2番目の列および最右列を中央揃えにするので、カッコ内は(6n+2)、(6n)。分かりやすいよう文字の色と太さも変えました。
以上のように、元データに一切触れずCSSだけで細かいスタイル調整が可能。今回は省きましたが、各行の高さを揃えるならTD要素にheightまたはmin-height属性を使えばOK。
この記事を書いてて最後に気付いたこと。特定の列にスタイルを当てる際、TR要素ごとに「子要素TDのうち■番目」を指定すれば、つまりtr td:nth-child(■)で、全体の列数を知ることなく単純に「左から■列目」を指定できるかも。そのうち試します。