質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1821閲覧

th要素に縦線の付け方

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/08/25 09:12

編集2018/08/25 12:39

前提・実現したいこと

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", "MS P明朝", "MS 明朝", 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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答4

0

ベストアンサー

<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

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

0

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

投稿2018/08/27 08:06

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/08/27 13:35

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

0

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

CSS

1 .info1, .info2, .info3 .info4, .detail { //34の間にカンマがない

上記のせいで下2つの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

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

0

いま私たちから見える景色:(何も分からない)
イメージ説明

投稿2018/08/25 09:46

liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bwz61366

2018/08/25 09:59 編集

ソースコードが質問文から消えたからそのソースコードはかくことが出来ない なので我々は現在そのスクショどおりの現象すら再現することができない(屁理屈)
liveasnotes

2018/08/25 14:32

気付かない内に色々変わってて...(笑
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問