th要素に縦線の付け方

前提・実現したいこと

thに、縦の破線をつけたい。
「th」の「width」を固定値にして「before」要素で実装したい

発生している問題・エラーメッセージ

破線が繋がってしまって、間隔が均一にならない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" type="text/css" href="./css/reset.css">
6<link rel="stylesheet" type="text/css" href="./css/test.css">
7</head>
8<body>
9<main class="main">
10    <div class="main_container">
11        <div class="shop">
12            <div class="shop_info clearfix">
13                <table class="information">
14                    <caption>caption</caption>
15                    <tr>
16                        <th class="info1">info</th>
17                        <td class="detail">detail</td>
18                    </tr>
19                    <tr>
20                        <th class="info2">info</th>
21                        <td class="detail">detail</td>
22                   </tr>
23                   <tr>
24                        <th class="info3">info</th>
25                        <td class="detail">detail</td>
26                   </tr>
27                   <tr>
28                        <th class="info4">info</th>
29                        <td class="detail">detail</td>
30                   </tr>
31                </table>
32           </div>
33        </div>
34    </div>
35</main>
36</body>
37</html>
38
39

css
1
2
3.information {
4    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
5    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
6    font-weight: normal;
7    float: left;
8    width: 500px;
9}
10
11
12caption {
13    font-size: 24px;
14    font-weight: bold;
15    text-align: left;
16    padding-bottom: 20px;
17    border-bottom: solid 1px #9362c4;
18    margin-bottom: 30px;
19}
20
21.info1, .info2, .info3, .info4, .detail {
22    font-size: 18px;
23    padding-bottom: 34px;
24}
25
26.info1, .info2, .info3, .info4 {
27    text-align: left;
28    vertical-align: middle;
29    width: 120px;
30    box-sizing: border-box;
31}
32
33.info1, .info2, .info3, .info4, :before{
34    border-right: 1px dashed #9362c4;
35}
36
37.detail {
38    padding-left: 25px;
39}
40
41

試したこと

補足情報（FW/ツールのバージョンなど）

google chrome 67.0.3396.99
Mac10.13.6

bwz61366

2018/08/25 09:20

HTMLを追記してくださいなー。あと、「破線が繋がってしまって、間隔が均一にならない」っつーのが再現できないです。問題を再現できるコードをのせてね

liveasnotes

2018/08/25 09:43

再現性のあるコードと一緒に，スクショもください．

liveasnotes

2018/08/25 09:44

そのほか思ったこと：「.th」は「th」ではないか/「th :before」は「th::before」ではないか

m.ts10806

2018/08/25 09:49

ほぼ解決できそうな指摘入ってますけど、ひとまず、フロントエンドのことなので、確認されたブラウザとバージョンも追記しておいてください

退会済みユーザー

2018/08/25 10:32

色々と初心者で至らない点ばかりで申し訳ないです。色々試した結果reset.cssを適用するとこの現象が起きるようでして、、

yukihisa

2018/08/25 11:16

reset.cssってなんぞ。。。質問の仕方はきちんとチュートリアルを熟読してください。初心者というのは至らないことへの免罪符ではありません。初心者なればこそ、マニュアルなどやり方をキチンと確認しながら作業に臨みましょう。

m.ts10806

2018/08/25 11:53

後出しが過ぎると前提が崩れ、既に回答がついている場合はその回答が無駄になることが多々あります。初心者であればなおさら提供する情報を絞り込まず、全て提供するようにしてください。あと「初心者アイコン」があるので質問本文などに書くのではなくその初心者アイコンを使ってください。

m.ts10806

2018/08/25 11:55

reset.cssについては自身が作ったものや既存のものを改修したものでなければ提供元を明示し、自身で改修していない旨を書けば良いかと思います。質問に載せるのはあくまで「自身が書いたコード」（つまり自身の責任において提供できるコード）のみで良いです。

退会済みユーザー

2018/08/25 12:46

ご指摘ありがとうございます。今後はそのようにいたします。

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

回答4件

ベストアンサー

<table>要素に border-collapse: separate; border-spacing: 0px 3px; を追加で、希望の表示になると思います。

http://www.htmq.com/style/border-spacing.shtml
<以下抜粋>
border-spacingプロパティは、隣接するセルのボーダーとボーダーの間隔を指定する際に使用します。 border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。

値を1つ指定した場合： [上下左右]の間隔が指定された値になります。
値を2つ指定した場合：記述した順に[左右][上下]の間隔が指定された値になります。

尚、border-spacingプロパティに負の値を指定することはできません。

投稿2018/08/27 02:05

marlboro_tata

総合スコア525

yukihisa

2018/08/27 02:21

それをすると今度は高さによって破線の間隔が一定でない(border-spacingを指定せずにちょうどいい高さの場合破線の間隔が倍になる)、という問題が発生しませんか？また、border-spacingで高さが変わるので、それならばセルの高さで調整したほうが良いかと思います。

marlboro_tata

2018/08/27 02:33

質問された方がその辺り判断されて良き方法で収めれば良いと考えております。その上で個人的な意見を述べるのであれば、セルの高さで調整するとおっしゃいますのは、良きところでセルの高さを固定するという意味だと解釈しました。セルの高さを固定しても問題がないようであれば、その方法で十分よろしいかと思います。ただ、セル内に入力する内容が増減するなどの場合を考慮に入れなければならない場合は、高さを固定するわけにはいかないのではないかと考えました。希望の表示と書いたのは良くなかったですね、それは質問された方が判断することでした。

yukihisa

2018/08/27 02:46

あぁ、申し訳ない。セルの高さを調整する＝セル固定ではなく、line-heightで一行の高さをきちんと破線に合わせるという形で考えていました。破線に合わせて高さを変える、と言う意味ではその方が後のカスタマイズに対応しやすいかと思うので(上下にもborder指定したくなったとか)。めちゃくちゃ言葉足らずというか意味が変わってきますね。。。まぁ、何が言いたいのかと言うと質問者様の気にしている部分は破線が繋がる+”間隔が均一でない”というところなので、おそらく破線の間隔についても気にするのではないか、ということを前提にしたときに、行の高さが決まっているわけではない+padding-bottomが34pxで固定されているため、複数行になったときに果たして破線がぴったり同じように重なるかどうか？と言う部分が気になったのです。とはいえ、正直言うとクラス分けなんぞせずにthに設定するのが一番手っ取り早い、というのが個人的な感想です。

marlboro_tata

2018/08/27 03:02

もしくは<th><td>のline-height、上下paddingの値を6px（ボーダーの破線の高さ分）の倍数にすれば、改行などで行が増えても、破線が収まるのではないでしょうか（思いつきなので未検証です）

yukihisa

2018/08/27 03:13

それでもできそうですね！質問がだいぶ編集されて当初の面影が全くない(今後も「あれはこうしたいから変更できない」とかありそうな気がする)ので、こちらでエスパーするしかないのが困ったところですね。。。

marlboro_tata

2018/08/27 05:04

ありがとうございます。そうですね。回答を書く難しさを感じました。あのあと、気になって思いつきを検証したところ、ボーダーの破線について興味深い事案を見つけたので、自サイトで記事にしようと思います。

退会済みユーザー

2018/08/30 05:20

ブログも拝見させていただきました。とても分かりやすかったです。ブログ、ブックマークさせていただきました、、！ご回答ありがとうございます！

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

border-style の dashed 値の線の長さは実装依存です。厳密に表示したいのであれば、border-image を使ったほうがいいのではないでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/border-style

投稿2018/08/27 08:06

x_x

総合スコア13749

liveasnotes

2018/08/27 12:12

リンクはこっちですね https://developer.mozilla.org/ja/docs/Web/CSS/border-image

x_x

2018/08/27 13:35

実装依存を言いたかったので（汗実のところ、わざわざ画像作ってまで実現したくないものです

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

まず、破線がつながる？のはthのborder-rightではなく各thのクラス毎にborder-rightを指定しているので、始点と終点がちょうど重なる高さであれば今回のように繋がって見えます。
また、

CSS
1  .info1, .info2, .info3 .info4, .detail {   //3と4の間にカンマがない

上記のせいで下２つのth要素にはCSSが適用されません。
reset.cssのせいではないですね。
出先のためスマホでの回答につき、動作確認しておりませんので悪しからず。

投稿2018/08/25 12:07

編集2018/08/25 12:27

yukihisa

総合スコア672

退会済みユーザー

2018/08/25 12:43

ご回答ありがとうございます。カンマの部分に関しては修正し、適用されました！ thのクラスごとにborder-rightを指定し、繋がらないようにする方法はありませんでしょうか？行の追加、ないし削除が発生した際に、HTMLを追加、削除するだけでデザインを保持する事ができるようにしたいなと考えております。

yukihisa

2018/08/25 12:51

cssを拝見した限りではそもそもthをクラス分けする必要がないように見受けられます。一度thに対してcssを設定してみてはいかがでしょうか？

yukihisa

2018/08/25 13:01

どうしてもクラス分けしたいならheightの調整するくらいしかやりようがない気がする。。。 pcが今手元にないため抽象的にしか言えません、申し訳ない。

yukihisa

2018/08/27 02:17

とりあえずthに対して指定したもの。 https://codepen.io/yukihisa/pen/RYaaag 最下段にHTML追加していますが問題なく動作しています。クラス分けをしてしまうと逆に追加するたび".info○"のクラスをcssに追加しなくてはいけなくなるので、お勧めできません。 javascriptなどで使用するために分けたい場合はクラスではなくidで分け、スタイルの適用はidに対しては特に設定しない、と言う形が良いかと思います。

退会済みユーザー

2018/08/30 05:18

おっしゃる通りですね、気づきませんでした。もう少し簡潔にできないか考えます。ご丁寧にありがとうございます！！

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

いま私たちから見える景色：（何も分からない）