表の線を部分的に消したい

表セルの右と下に線をつけているのですが、
部分的に線を消したい部分があります。

量が多くなりそうなので、出来れば直接スタイルを書き込むのではなく、
class対応したいのですが、下記の1行目(A商品)、2行目(B商品)のスタイル書き込みは
反応するのですが、3行目(C商品)のclassは反応しません。

一度見て頂き、ご意見を頂けると助かります。

≪css≫

.price_list  table td
 {
border-bottom: thin solid #999;
border-right: thin solid #999;
}

.nob_b{
	border-bottom-style:none;
}

.nob_r{
	border-right-style:none;
}

≪html≫

<div class="price_list">

<table>
<tr>
<td style="border-bottom:none;">A商品</td>
<td>◎◎</td>
<td>￥15,000</td>
</tr>
<tr>
<td style="border-right:none;">B商品</td>
<td>▲▼▲</td>
<td>￥27,000</td>
</tr>
<tr>
<td class="nob_b nob_r">C商品</td>
<td>☆☆☆</td>
<td>￥16,000</td>
</tr>
</table>

</div>

kei344

2017/05/18 11:12

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

行動規範の内容に同意します

回答2件

ベストアンサー

CSS
1.price_list td {
2    border-bottom: thin solid #999;
3    border-right: thin solid #999;
4}
5
6.price_list td.nob_b {
7    border-bottom-style:none;
8}
9
10.price_list td.nob_r {
11    border-right-style:none;
12}
13```**動くサンプル：**[https://jsfiddle.net/b2cge0b9/](https://jsfiddle.net/b2cge0b9/)
14
15---
16
17【!importantはもう使わない！CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】
18[http://creator.aainc.co.jp/archives/4947](http://creator.aainc.co.jp/archives/4947)
19
20【CSSが効かないときの優先順位チェック(2)～id・class編】
21[https://naifix.com/css-priority-2/](https://naifix.com/css-priority-2/)
22
23【CSSセレクタの優先順位の計算方法 - Qiita】
24[http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666](http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666)