標準的なブラウザでは、特にスタイルを指定しなければ、table要素のセル同士の隙間が2ピクセル程度空けられます。
そのほうが見やすい場合もありますが、いま作成しているサンプルサイトでは、この隙間を閉じようと思います。
テーブルのセル同士の間にできる隙間は、CSSのborder-collapseプロパティで閉じることができます。
table.cssに以下の一行を追加してください。
@charset "utf-8";
/*============================================
テーブル
============================================*/
table.profile {
width:680px; /*テーブル全体の幅*/
border-collapse:collapse; /*セル同士の間に隙間を空けない*/
}
table.profile th {
width:150px; /*見出しセルの幅*/
padding:10px; /*パディング*/
text-align:center; /*センター揃えにする*/
white-space:nowrap; /*セル内の改行を禁止する*/
background-color:#ccccee; /*セルの背景色*/
border-bottom:dotted #666666 1px; /*セルのボーダー*/
}
table.profile td {
padding:10px; /*パディング*/
background-color:#eeeeff; /*セルの背景色*/
border-bottom:dotted #666666 1px; /*セルのボーダー*/
}
保存をしたらブラウザで表示してみましょう。
セル間の隙間が閉じれば成功です。
セル間の隙間が無くなったことで、table要素とh3要素の横幅が1ピクセルのズレもなく揃ったはずです。
<前へ | 目次へ | 次へ> |