hrの色が灰色になる現象

線を表すhrをtableに引いたのですが、色をオレンジ色に指定したのに、灰色になります。

html
1<table border="1">
2      <tr>
3    <td colspan="2">
4    カレーについて  
5      <hr class="point">    
6     </td>
7     </tr> 	         
8     <tr>
9     <td>
10     インドカレー   
11     </td>
12     <td>
13     日本カレー   
14     </td>
15   </tr>
16     <table>

cssで、線を

css
1.point{
2   margin: 1px; 
3   width :100%;
4    border-top: 1px dashed #FFA07A;    
5}    
6

と指定したのですが、指定した線の上に灰色の線が重なっています。
灰色の線を消すにはどうすればいいですか？

kei344

2016/11/16 11:30

「borderは全て消してあります」とコメントに書かれていますがその記載が質問文にありません。追記してください。

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

回答4件

いったんborderを消しての再指定をやってみてください。

css
1.point{
2	margin: 1px; 
3	width :100%;
4	border: 0;
5	border-top: 1px dashed #FFA07A;
6}

###追記
これを新規のメモ帳か何かにまんま貼り付けて「test.html」という名前で保存して開いてみてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>sample</title>
6<style>
7body {
8	padding: 15px;
9}
10table {
11	margin: 15px;
12}
13.point{
14	margin: 1px; 
15	width: 100%;
16	border: 0;
17	border-top: 1px dashed #FFA07A;
18	box-shadow: none;
19}
20</style>
21</head>
22<body>
23	<table>
24		<tr>
25			<td colspan="2">
26				test
27				<hr class="point">
28			</td>
29		</tr>              
30		<tr>
31			<td>test</td>
32			<td>test</td>
33		</tr>
34	</table>
35	<hr class="point">
36</body>
37</html>

投稿2016/11/16 09:51

編集2016/11/17 12:28

gin

総合スコア2722

diamonddogs

2016/11/16 11:24

すみません。説明不足な点があるので補足させていただきます。このhrに重なるtdのborderは全て消してあります。それなのに、灰色の線が出てくる現象が起こったので今回質問させていただきました。

think49

2016/11/16 11:43 編集

横からですが、ginさんが仰っている消す対象は td ではなくて hr の border-left, border-right, border-bottom なのでは…。 https://jsfiddle.net/pp6zqyu8/

gin

2016/11/16 12:16

think49さんのおっしゃるとおりhr要素のborderですよ～下左右を1個1個消すでもOKですが、1度にまとめて消した方が楽ですｗ

think49

2016/11/16 12:52 編集

本題から逸れますが、この要件ならhr要素ではなく、thead要素/td要素/tr要素のいずれかにスタイルを割り当てたくなりますね…。割り当て可能な要素が3つもあるのでデザインの融通はききそうです。 https://jsfiddle.net/pp6zqyu8/1/

gin

2016/11/16 14:05

ですね～これだけの要件(hrの下にテキストが入ったりしない)だとtd(thにしたいところ…)にborder-bottom入れるのがすっきりしますな^^

diamonddogs

2016/11/16 15:48

border: 0; としたのですが、灰色の線が以前残っています。

gin

2016/11/16 15:50 編集

回答のコードをまるごとそのままコピペして使いました？？

diamonddogs

2016/11/16 15:53

使いました。

gin

2016/11/16 16:00

hrについてるclassである.pointにしっかり指定したのであれば、think49さんが提示してくれたようになるんですけどね… borderがオレンジの破線以外何もいない状態に。指定の順番も回答の順番で4つだけですよね？

gin

2016/11/16 16:38

んー。再度以下を確認してみてください。＜スペルミスなどを含め１． <hr class="point"> ちゃんとhrにpointが指定されているか。２．それに対応するcssは一字一句このままか。ひとまずこの4つ以外は指定しないでください。 .point{ margin: 1px; width :100%; border: 0; border-top: 1px dashed #FFA07A; } ３．ここ以外で「.point」が定義されていないか。

diamonddogs

2016/11/16 16:40

ginさんのいう通りにやったのですが、灰色の線が表示されたままです。ですが、toutouさんは灰色の線が消せたと言っていたので、明日またやって見ます。夜遅くまで教えてくださってありがとうございます。とても嬉しいです。

gin

2016/11/16 16:45

試してみてダメだった場合、これ『実験で』ぶちこんでみてください。 <hr class="point"> 　↓ <hr style="border:0;border-top: 1px dashed #FFA07A;" class="point"> CSS直書きです。実験なので確かめたら元に戻しておいてくださいね。

diamonddogs

2016/11/17 07:43

消えないのですが・・・ tdのborderを消したのが原因でしょうか？

gin

2016/11/17 07:51

実験の直書きでもダメでした？ hrのことなのでtdは関係ありません。

diamonddogs

2016/11/17 08:17

ダメでした。何が原因だか toutouさんも灰色の線が表示された言っていたので、何かあるかもしれません。

gin

2016/11/17 08:22

toutouさんの言われているのはborder:0;を指定する前のことですよ。指定した後は消えています。んー。これ↓もhrの.pointのCSSのところに追加してみてください。 box-shadow: none; いったんこれでもいいです。 <hr style="box-shadow: none;border:0;border-top: 1px dashed #FFA07A;" class="point">

gin

2016/11/17 12:30

追記しました。これでもダメならブラウザとかそっちのほうに問題があると思います。