tableで気を付けたいポイントなど。
Contents
ボーダー表示
通常のtableのラインは二重線でちょっと気持ちが悪いです。通常はcollapseが一般的でしょう。
|
1 2 3 4 |
//実践(境界線の感覚がない) border-collapse:collapse; 二重線(境界線の感覚あり) border-collapse:separate; |
テーブルの背景色とボーダーのスタイル
テーブル枠と、内部の枠の幅を調整したい場合はtableのCSSを下記のように設定
|
1 2 |
table{ border:4px solid #000} table{ border:2px solid #000} |
tableのレイアウト
table-layoutを使うことで、各セルの幅をコントロールすることができる。
|
1 2 3 4 |
table{ width:100%; table-layout:fixed; } |
table-layout auto
全体を読み込んでから幅の長さを決定する。幅がテキストの長さに依存。幅が長ければ長いほどセル幅も長くなる。
table-layout fixed
幅を指定したいときにはこれをつかう。一行目を読み込んだ時点で幅の長さを決定する。
ただし幅が指定されている必要があり、幅が指定されていないと等間隔になります。
widthなどで値を指定できますが、基本としては下記のような特徴があります。
- 親以上の幅は取れない
- 他のテーブルの文字をつぶすことはできない
- 同一列で長さが違った場合(例えばthとtdなど。)は長いほうが優先される
★スタイルシートリファレンス
CSSでtable幅を設定するためのまとめ
中央ぞろえはtext-alignとvertical-alignで決まります。
nth系
たとえば最終列のみ右寄せにしたい場合は下記のように書きます。
|
1 2 3 |
td:last-child{ text-align:right; } |
4列目と6列目を右寄せにしたい場合は下記のようになります。(主に数字のデータなど)
|
1 2 3 |
td:nth-child(4),nth-child(6){ text-align:right; } |
4列目以降は改行しない
|
1 2 3 |
td:nth-child(n+4){ white-space:nowrap; } |
偶数行のみ色をつけたい
|
1 2 3 |
tr:nth-child(2n){ background:色; } |
※ちなみに奇数は2nの代わりに2n+1など。
