cssでテーブルで細い線

質問

スタイルシートを使って
1ピクセルの細い線にしようと、
サンプルのように以下のようにしてみましたが
中の線（td？）が二重になってしまいます

一線にするのにどのようにすればイイですか？

――――――――
.table2 {
width: 400px; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
background-color: #FFFFFF; /* 背景色 */
}

.table2 TD {
border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */
}

――――――――――――――

<TABLE CLASS="table2">
<TR>
<TD>WebデザインA</TD>
<TD>WebデザインB</TD>
</TR>
<TR>
<TD>WebデザインC</TD>
<TD>WebデザインD</TD>
</TR>
</TABLE>

回答No.3

ORUKA1951 · ベストアンサー

たぷん示されたものと期待通りにならないものが違う。
明らかな記述間違い
.table2 TD {
border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */
}
を
table2 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
}
にするとちゃんとなるはず。

HTMLとCSSを書き直すと
<table summary="WebDesign"><!-- summaryは必須 TBODY+ -->
　<tbody><!-- tbodyはひとつ以上必須 -->
　　<tr>
　　　<td>Webデザイン</td>
　　　<td>Webデザイン</td>
　　</tr>
　　<tr>
　　　<td>Webデザイン</td>
　　　<td>Webデザイン</td>
　　</tr>
　</tbody>
</table>

[CSS]
table[summary="WebDesign"]{
border-collapse: collapse;
width: 400px;
}
table[summary="WebDesign"],table[summary="WebDesign"] td{
boder:solid 1px #1C79C6;
}
CSS2以降では、基点となるタイプセレクタに続いてセレクタを書いていきます。
.から書き始めても*.と全称セレクタ(詳細度0)があるものとして扱われます。きちんと書いたほうが良いでしょう。
tableはsummary属性が必須(HTML5では必須ではなくなります。)でしたので、それ(要素セレクタ)を利用したほうがスマートでしょうね。
　同じプロパティ(boder:solid ipx #1C79C6;)でしたらセレクタをグループ化したほうがメンテナンスが楽です。（変えるときに分ければよい）一箇所変更すればよい。上記だと
table[summary="WebDesign"]{boder-width:3px;}
を追記すれば外枠だけ太くなる。

お礼

ご回答ありがとうございますッ！
とっても助かりました
ただ色々と試してみましたがうまくいかなかったので
新しく質問致します
私のスキル不足です
ごめんなさい。

回答No.2

DrFell

.table2 TD {
border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */
}
を下記に変更すればＯＫ。

.table2 td {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
border-collapse: collapse; /* 枠線の表示方法 */
}

お礼

ご回答ありがとうございますッ！
とっても助かりました
ただ色々と試してみましたがうまくいかなかったので
新しく質問致します
私のスキル不足です
ごめんなさい。

回答No.1

kosukejlampnet

.table2 TD {
border: 1px #1C79C6 solid;
}

お礼

ご回答ありがとうございますッ！
とっても助かりました
ただ色々と試してみましたがうまくいかなかったので
新しく質問致します
私のスキル不足です
ごめんなさい。