プロが教えるわが家の防犯対策術!

スタイルシートを使って
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>

A 回答 (3件)

たぷん示されたものと期待通りにならないものが違う。


明らかな記述間違い
.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;}
を追記すれば外枠だけ太くなる。
    • good
    • 0
この回答へのお礼

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

お礼日時:2013/05/06 16:19

.table2 TD {


border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */
}
を下記に変更すればOK。

.table2 td {
border: 1px #1C79C6 solid; /* セルの枠線(太さ・色・スタイル) */
border-collapse: collapse; /* 枠線の表示方法 */
}
    • good
    • 0
この回答へのお礼

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

お礼日時:2013/05/06 16:20

.table2 TD {


border: 1px #1C79C6 solid;
}
    • good
    • 0
この回答へのお礼

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

お礼日時:2013/05/06 16:20

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!