スタイルシートを使って
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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
HTML5で、テーブル内tdタグの高...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
cssで、1行2段のtableを記述す...
-
TABLEのセルの中の文字を行単位...
-
tableのcellpadding="0" cellsp...
-
スタイルの無効化
-
テーブルの高さを100%にしたけ...
-
テーブル内のセル間にスペース...
-
IE8などでCSSでテーブルを中央...
-
同じ幅指定のつもりなのに、ブ...
-
スタイルシートで左側だけ色を...
-
tableの位置がIEとその他ブラウ...
-
tableを縦に続けるとtable間の...
-
ラインを端から端まで画面いっ...
-
tableを画面中央に配置する方法
-
cssでテーブルで細い線
-
table 幅固定で、端までいった...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
(HTML)Tableを任意の位置に置...
-
正規表現で「より前」と「より後」
-
CSS スタイルを子要素の子要素...
-
tableの位置がIEとその他ブラウ...
-
<fieldset>タグについて
-
<table>のclass指定が継承されない
-
html5のテーブル内でdivのタブ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
tableのcellpadding="0" cellsp...
おすすめ情報