[CSS]枠線がうまく出来ない。

質問

商品名と価格のリストを掲載しようとしています。
1列目に商品名、2列目に商品名と価格が引っ付かないように空白用枠(幅15px)、3列目に価格を掲載しています。
当初は枠に線を引こうとしたのですが、項目名なども枠内に入ってしまうため、カッコ悪かったです。

なので、TDにCSSで枠線を引こうと考えました
で、色々とやってみたのですが、以下の問題が…
(ソースを張ろうと思ったのですが、文字数制限に引っかかっちゃいました。)

1.なぜか上だけ濃い。後は薄い?
2.行の間が開かない(枠線が引っ付いてしまう)

なんとも説明が下手ですみませんが、こんな状況です。
綺麗にするにはどうしたらいいでしょう?

回答No.2

tany180sx · ベストアンサー

とりあえず、カラー値の後ろにセミコロンが無いように見えますが。

回答No.3

BLUEPIXY

＞border-color: #006699
の後にも「;」が必要です

お礼

ありがとうございます。

無事修正できました。

回答No.1

BLUEPIXY

答えられるかどうかわかりませんが、（多分他の人が答えてくれるでしょう）
とりあえず、補足でソースを張ってください。

補足

ありがとうございます。その指摘がつくのを待ってました。

<STYLE type="text/css">
<!--
.l { /* リスト */
border-style: solid; /* 枠の形 */
border-color: #006699
border-top-width: 1px; /* 上の枠 */
border-bottom-width: 1px; /* 下の枠 */
border-left-width: 1px; /* 左の枠 */
border-right-width: 0px; /* 右の枠 */
padding-top: 5px; /* 上の余白 */
padding-bottom: 5px; /* 下の余白 */
padding-left: 10px; /* 左の余白 */
}
.a { /* 間 */
border-style: solid; /* 枠の形 */
border-color: #006699
border-top-width: 1px; /* 上の枠 */
border-bottom-width: 1px; /* 下の枠 */
border-left-width: 0px; /* 左の枠 */
border-right-width: 0px; /* 右の枠 */
padding-top: 5px; /* 上の余白 */
padding-bottom: 5px; /* 下の余白 */
}
.p { /* 価格 */
border-style: solid; /* 枠の形 */
border-top-width: 1px; /* 上の枠 */
border-bottom-width: 1px; /* 下の枠 */
border-left-width: 0px; /* 左の枠 */
border-right-width: 1px; /* 右の枠 */
border-color: #006699
padding-top: 5px; /* 上の余白 */
padding-bottom: 5px; /* 下の余白 */
}

-->
</STYLE>

とりあえず、こんな感じです。