
スタイルシートを使って
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ベストアンサー
- 回答日時:
たぷん示されたものと期待通りにならないものが違う。
明らかな記述間違い
.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
- 回答日時:
.table2 TD {
border: 1px #1C79C6 collapse; /* セルの枠線(太さ・色・スタイル) */
}
を下記に変更すればOK。
.table2 td {
border: 1px #1C79C6 solid; /* セルの枠線(太さ・色・スタイル) */
border-collapse: collapse; /* 枠線の表示方法 */
}
ご回答ありがとうございますッ!
とっても助かりました
ただ色々と試してみましたがうまくいかなかったので
新しく質問致します
私のスキル不足です
ごめんなさい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ幅指定のつもりなのに、ブ...
-
横長のコンテンツを含む場合のd...
-
HTML tableのセルにtextareaを...
-
<th>タグを使っても太字にしな...
-
ホームページのテキストを折り...
-
DreamWeaverで複数ワードを一気...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
<img>タグにCSSのclass設定可能?
-
テーブルのセルに画像をピッタ...
-
テーブルを使ったレイアウトで
-
テーブル(表)を2つ横に並べて...
-
テーブルタグの中に<ol><li>を...
-
cssで、表示されるテキストによ...
-
テーブル内文字列がテーブル幅...
-
tableの中にtableを作りスクロ...
-
表の中の列の順番を入れ替える...
-
テーブルの上下右側にテーブル...
-
テーブルの任意の列を非表示に...
-
サイト作成中・・・表の両端に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
テーブル内のセル間にスペース...
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
table表を横に並べる際の間隔指定
-
html5のテーブル内でdivのタブ...
-
HTML5で、テーブル内tdタグの高...
-
<fieldset>タグについて
-
HTML tableのセルにtextareaを...
-
tableのcellpadding="0" cellsp...
-
(HTML)Tableを任意の位置に置...
-
HTMLのテーブルをExcelにCopy&P...
-
ホームページのテキストを折り...
-
textareaの外側の文字が下付き...
-
テーブルデータを折り返して表...
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
-
検索窓の位置を指定する方法
-
tableを縦に続けるとtable間の...
おすすめ情報