ここから本文です

テーブルを作っています。 テーブルをレイアウトしましたが、一番下段の線が2本...

nat********さん

2018/7/1116:02:58

テーブルを作っています。
テーブルをレイアウトしましたが、一番下段の線が2本になってしまいます。

#content .CB{
height:20px;
font-size:12px;
color:#333;
padding:5px;
border-bottom:none;
}
ここの border-bottom:none;が効きません。
初心者の為ご指導よろしくお願い致します。

HTML
<div id="content">
<table class="contentTBL">
<tr>
<td class="CL">商品A</td>
</tr>
<tr>
<th><img src="image/1.jpg" class="banner"></th>
</tr>
<tr>
<td class="CC">納期:当日出荷~</td>
</tr>
<tr>
<td class="CC">ロット:10本~</td>
</tr>
<tr>
<td class="CC"><a href="">10本:3240円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">100本:1836円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">500本:1080円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
</table>
<table class="contentTBL">
<tr>
<td class="CL">商品B</td>
</tr>
<tr>
<th><img src="image/1.jpg" class="banner"></th>
</tr>
<tr>
<td class="CC">納期:当日出荷~</td>
</tr>
<tr>
<td class="CC">ロット:10本~</td>
</tr>
<tr>
<td class="CC"><a href="">10本:3240円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">100本:1836円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">500本:1080円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
</table>
<table class="contentTBR">
<tr>
<td class="CL">商品C</td>
</tr>
<tr>
<th><img src="image/1.jpg" class="banner"></th>
</tr>
<tr>
<td class="CC">納期:当日出荷~</td>
</tr>
<tr>
<td class="CC">ロット:10本~</td>
</tr>
<tr>
<td class="CC"><a href="">10本:3240円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">100本:1836円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
<tr>
<td class="CC"><a href="">500本:1080円(税込)~<span class="sp"><img src="image/bt.jpg" class="button"></span></a></td>
</tr>
</table>
<div class="clear"><br></div><!-- フロート解除 -->

補足#content .contentTBL{
width:310px;
margin-right:4px;
border: 1px solid #ddd;
float: left;
table-layout:fixed
}
#content .contentTBL td{
border-bottom:solid 1px #ddd;
}
#content .contentTBL th{
width:300px;
height:200px;
padding:5px;
border-bottom: 1px solid #ddd;
}
#content .contentTBR{
width:310px;
margin:0px;
padding:0px;
border:solid 1px #ddd;
float: left;
table-layout:fixed
}
#content .contentTBR td{
border-bottom:solid 1px #ddd;
}
#content .contentTBR th{
width:300px;
height:200px;
padding:5px;
border-bottom: 1px solid #ddd;
}
#content .CL{
font-size:20px;
margin-left:auto;
margin-right:auto;
color:#000;
padding:5px;
background:#ddd;
text-align:center;
}
#content .CC{
height:20px;
font-size:12px;
color:#333;
padding:5px;
}
#content .CB{
height:20px;
font-size:12px;
color:#333;
padding:5px;
border-bottom:none;
}

閲覧数:
21
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

hei********さん

2018/7/1116:45:23

HTML に class="CB" が入っていないので、入れるとして

問題は、css の詳細度です。

#content .contentTBL td{
#content .CB{
この2つですが、上の方が詳細度が高いので優先されます。

ですから、次のように書きます。
#content .contentTBL .CB{

質問した人からのコメント

2018/7/11 17:08:27

回答ありがとうございます!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる