Chromeでテーブルの一部CSSがうまく反映されない

前提・実現したいこと

html5とCSSで以下のようなテーブルを作成しています。
Chrome上でローカルにあるファイルを表示させています。

発生している問題

ボーダーを全てドットで指定しているのですが、一部が実線で表示されてしまいます。

該当のソースコード

html
1<html>
2<style type="text/css" media="screen">
3    html {
4        border: none;
5    }
6
7    body {
8        margin: 0;
9        padding: 0;
10    }
11
12    table.usual {
13        width:900px;
14        margin-bottom:15px;
15        border-collapse:collapse;
16        border: dotted 1px #666666;
17    }
18
19    table.usual th,
20    table.usual td {
21        padding: 10px;
22        border: 1px dotted #666666;
23    }
24
25    table.usual th {
26        color: #333;
27        background-color: #ecaa2e;
28        border: 1px dotted #666666;
29    }
30</style>
31<body>
32    <div class="content_bg" align="center">
33        <h2>メニュー</h2>
34        <div style="width:1000px; height: 400px; overflow-x:auto;overflow-y:auto">
35            <table class="usual">
36                <tr>
37                    <th style="text-align: center;" colspan="6">ご飯もの</th>
38                </tr>
39                <tr>
40                    <td colspan="6">
41                        <div style="border: 1px solid #666666; height:30px; width:150px; text-align:center;line-height:30px;Float:left;">
42                            カレー
43                        </div>
44                    </td>
45                </tr>
46                <tr>
47                    <td>にんじん</td>
48                    <td>たまねぎ</td>
49                    <td>じゃがいも</td>
50                    <td>豚肉</td>
51                    <td>カレールー</td>
52                    <td>600円</td>
53                </tr>
54                <tr>
55                    <td colspan="6">
56                        <div style="border: 1px solid #666666; height:30px; width:150px; text-align:center;line-height:30px;Float:left;">
57                            チャーハン
58                        </div>
59                    </td>
60                </tr>
61                <tr>
62                    <td>卵</td>
63                    <td>ねぎ</td>
64                    <td>にんじん</td>
65                    <td>チャーシュー</td>
66                    <td>ご飯</td>
67                    <td>500円</td>
68                </tr>
69            </table>
70        </div>
71    </div>
72</body>
73</html>

試したこと

FireFox、IEで試したところ、正常に表示されました。
CSSをタグに記入したりもしましたが変わりません。
ブラウザとの関係かと思い調べてみたのですが分からず、質問させていただきました。
よろしくお願い致します。

azuapricot

2019/01/09 04:03

chromeはキャッシュクリアしないとなかなかCSS表示してくれませんが、もちろんキャッシュクリアはされてますよね？

onakahetta

2019/01/09 04:08

私が読んだ記事には画像とファイルのキャッシュのみ削除すればいいと書いてあったのでそれだけ行ったのですが、閲覧履歴等も削除した方がよろしいのでしょうか？

azuapricot

2019/01/09 04:11

F12を押してディベロッパーツールを開いて、画面を更新するマークを右クリック→キャッシュの消去とハードの再読み込みこれをやって改善されないのであれば、キャッシュではなくコードの問題ですね

onakahetta

2019/01/09 05:07

ありがとうございます。やってみましたが改善されませんでした。

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

回答4件

Chromeで colspan と dotted の組み合わせで発生するようです。
私の環境でも再現しました。

css
1table {
2    border-collapse:separate;
3    border-spacing:0px;
4}

solid になる現象は上記で回避できますが、線が重なった箇所は濃くなってしまいます。

dotted を諦めるか、濃くなるのを許容するかしかなさそうです。

投稿2019/01/09 04:27

mri0815

総合スコア429

onakahetta

2019/01/09 05:30

ご回答ありがとうございます。なるほど、組み合わせの問題なのですね。他の画面とデザインを合わせるためにドットにしたのですが、難しそうですね。。。

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

ベストアンサー

Chromeでも「重なり」を取れば大丈夫では？（少し面倒ですが･･･）

CSS
1body {
2  margin: 0;
3  padding: 0;
4}
5
6table.usual {
7  width:900px;
8  margin-bottom:15px;
9  border-collapse: separate;
10  border-spacing: 0;
11  border-top: 1px dotted #666666;
12  border-left: 1px dotted #666666;
13  border-right: 1px dotted #666666;
14}
15
16table.usual th {
17  padding: 10px;
18  color: #333;
19  background-color: #ecaa2e;
20  border-bottom: 1px dotted #666666;
21
22}
23
24table.usual td {
25  padding: 10px;
26  border-right: 1px dotted #666666;
27  border-bottom: 1px dotted #666666;
28}
29
30table.usual td:last-child {
31  border-right: none;
32}

投稿2019/01/09 06:44

yoshinavi

総合スコア3523

onakahetta

2019/01/09 07:55

ご回答ありがとうございます。記載いただいたコードを実行したところ、正常に表示されました！本当に助かりました。感謝申し上げます。

yoshinavi

2019/01/09 11:53

ブラウザの描画に関しては、意外とChromeは雑な感じがしますね。特にフォント関連は顕著で、ie11＞Firefox＞Chromeだと個人的には感じます。また、他のコメントにもありますが、インラインCSSはなるべく避けて、外部CSSに設定されるとページ数が増える程、管理がし易くなりますので、ご検討してみてください。解決されて何よりです。 (^^)

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

border: 1px dotted #666666;の1pxを少しずつ増やしていけば視覚的にわかりますが、
border-collapse: collapse;が原因でドットの描画が重なって実線に見えるようです。
ドットの描画を<td>から内部要素に移動するような工夫が必要です。
修正例を記載しておきます。

css
1
2    table.usual th,
3    table.usual td {
4        padding: 10px;
5//        border: 1px dotted #666666; これを削除
6        position: relative;//これを追加
7    }
8
9    /* 以下は追加 */
10    table.usual td:before {
11        content: " ";
12        display: block;
13        border-top: 1px dotted #666;
14        position: absolute;
15        top: 0;
16        bottom: 0;
17        left: 0;
18        right: 0;
19    }
20    table.usual td:not(:first-child):before {
21        border-left: 1px dotted #666;
22    }

投稿2019/01/09 05:08

kaba

総合スコア314

onakahetta

2019/01/09 06:42

ご回答ありがとうございます。ドットが重なって実線に見えていたのですね。 CSSの勉強を始めたばかりなので知識が乏しく申し訳ないのですが、<td>から内部要素に移動するというのはどういった意味でしょうか？ご教授いただけますと幸いです。

kaba

2019/01/09 07:53

<td>文字</td> のtdにborderを付けるのをやめて、 html構造を <td><div>文字</div></td> のように変更して<div>にborderを付与するという意味です。修正例ではhtml構造を変更する手間を省くために:before疑似要素を使ってそこにborderを付与しています。

onakahetta

2019/01/09 08:02

コメントありがとうございます。 :beforeはそういう場合に使うのですね。分かりやすい説明で、大変勉強になりました。

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

CSSはhead内に記載しましょう。

html
1<html>
2<head>
3<style type="text/css" media="screen">
4    html {
5        border: none;
6    }
7
8    body {
9        margin: 0;
10        padding: 0;
11    }
12
13    table.usual {
14        width:900px;
15        margin-bottom:15px;
16        border-collapse:collapse;
17        border: dotted 1px #666666;
18    }
19
20    table.usual th,
21    table.usual td {
22        padding: 10px;
23        border: 1px dotted #666666;
24    }
25
26    table.usual th {
27        color: #333;
28        background-color: #ecaa2e;
29        border: 1px dotted #666666;
30    }
31</style>
32</head>
33<body>
34    <div class="content_bg" align="center">
35        <h2>メニュー</h2>
36        <div style="width:1000px; height: 400px; overflow-x:auto;overflow-y:auto">
37            <table class="usual">
38                <tr>
39                    <th style="text-align: center;" colspan="6">ご飯もの</th>
40                </tr>
41                <tr>
42                    <td colspan="6">
43                        <div style="border: 1px solid #666666; height:30px; width:150px; text-align:center;line-height:30px;Float:left;">
44                            カレー
45                        </div>
46                    </td>
47                </tr>
48                <tr>
49                    <td>にんじん</td>
50                    <td>たまねぎ</td>
51                    <td>じゃがいも</td>
52                    <td>豚肉</td>
53                    <td>カレールー</td>
54                    <td>600円</td>
55                </tr>
56                <tr>
57                    <td colspan="6">
58                        <div style="border: 1px solid #666666; height:30px; width:150px; text-align:center;line-height:30px;Float:left;">
59                            チャーハン
60                        </div>
61                    </td>
62                </tr>
63                <tr>
64                    <td>卵</td>
65                    <td>ねぎ</td>
66                    <td>にんじん</td>
67                    <td>チャーシュー</td>
68                    <td>ご飯</td>
69                    <td>500円</td>
70                </tr>
71            </table>
72        </div>
73    </div>
74</body>
75</html>