10月 112011
ここでは、ホームページ上のテーブルを装飾する方法を紹介していきます。
border-collapse[各セル枠線を重ねる]
テーブルの各セル(マス)の枠線は何も指定しないと隙間があいているのですが、その隙間を無くして線を重ねることが出来ます。
CSSでテーブル各セルの枠線を重ねるにはborder-collapseを指定します。
| 指定可能値 | separate(隙間をあける), collapse(重ねる), inherit(親要素指定を継承) |
|---|---|
| [補足]枠線の表示方法 | |
[例1]テーブル各セルの枠線を重ねる
table {border-collapse:collapse;}
table-layout[テーブル横幅を固定]
テーブル全体の横幅は何も指定しないと内容(文字数、画像サイズ)によって幅が変わるのですが、その横幅を一定の幅に固定することが出来ます。
CSSでテーブルの横幅を固定するにはtable-layoutを指定します。
| 指定可能値 | auto(通常,幅自動調整), fixed(幅固定), inherit(親要素指定を継承) |
|---|
[例1]幅500ピクセルに固定
table {table-layout:fixed; width:500px;}