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

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

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

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

CSS

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

Q&A

解決済

1回答

2111閲覧

border-topが効かない

n2018

総合スコア19

HTML

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

CSS

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

1グッド

0クリップ

投稿2018/06/07 05:19

編集2018/06/07 07:47

html、cssでメールフォームを作成しています。
#formtable内にあるtrにborder-topが効く形に修正したいです。

trにborder-topを効かせるにはどうすればよいでしょうか。
以下がコード部分になります。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0"> <meta http-equiv="Expires" content="-1"> <link type="text/css" rel="stylesheet" href="form/css/common.css"> <link type="text/css" rel="stylesheet" href="form/css/form.css"> <script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('Android') > 0) { document.write('<meta name="viewport" content="width=device-width,initial-scale=1">'); }else{ document.write('<meta name="viewport" content="width=760, maximum-scale=1, user-scalable=0">'); } </script> <title></title> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> </head> <body> <div id="container"> <div id="header"> <h2>投稿フォーム</h2> </div> <table id="formtable"> <tr> <th class="f_th">投稿&nbsp;&nbsp;<span class="req">必須</span></th> <td class="f_td"> <p>初めて投稿されますか?</p><input type="radio" name="radio" value="1" id="yes_"><label for="yes_" class="label">&nbsp;&nbsp;はい</label> <input type="radio" name="radio" value="2" id="no_"><label for="no_" class="label">&nbsp;&nbsp;いいえ</label> </td> </tr> </table> </form> </div> </div> </body> </html>
@charset "utf-8"; html { background: #d6d4d6 url(../images/bgline.gif) scroll repeat-y center 0; } body { font-family:'ƒqƒ‰ƒMƒmŠpƒS Pro W3','Hiragino Kaku Gothic Pro','ƒƒCƒŠƒI',Meiryo,'‚l‚r ‚oƒSƒVƒbƒN',sans-serif; } a { color:#00685c; } a:hover { color: #009987 } .nhkscoop_link{ width: 100%; text-align: center; padding: 40px 0 40px 0; margin-top: 40px; border-top: 2px solid #d6d4d6; } @media screen and (min-width: 737px){ span.sp{display: none;} span.pc-ie8{display: none;} body{font-size:14px; min-width: 760px;} #container { width:760px; margin:0 auto; min-width: 760px; } #header { width:758px; height:216px; margin: 0 auto 5px auto; background: url(../images/header.jpg) scroll no-repeat 0 0; *background: url(../images/header.jpg) scroll no-repeat 1px 0; position:relative; } #header h2 { position:absolute; font-size:15px; letter-spacing:4px; color:#ab272d; } #content { width:646px; margin: 0 auto; } #btnarea { margin:18px auto; font-weight:bold; color:#ab272d; font-size:12px; text-align:center; } #btnarea #button { margin:18px auto; padding: 0; width:230px; height:42px; font-size:15px; letter-spacing:4px; border: 3px solid #ab272d; -moz-border-radius: 13px; -webkit-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; background-color:#f2eff2; } #btnarea #button a { text-decoration:none; padding-top:10px; color:#ab272d; width:236px; height:38px; display:block; } .nhkscoop_link img{ width: 645px; height: 80px; } } @media screen and (max-width: 736px){ span.pc-ie8{display: none;} body{ width: 100%; height: 100%; min-width: 320px; line-height: 1.5; font-size: 16px; } #container { width:100%; height: 100%; margin: 0 auto; overflow: hidden; } #container img{width: 100%;} #header { width: 100%; height:150px; background: url(../images/header_sp.jpg) scroll no-repeat 0 0; *background: url(../images/header_sp.jpg) scroll no-repeat 1px 0; background-size: contain; background-position: 50%; position:relative; border-top: solid 12px #ad262a; } #header h2 { position:absolute; font-size:20px; letter-spacing:4px; color:#ab272d; } #content { width:95%; margin:0 auto; } #btnarea { margin:18px auto; font-weight:bold; color:#ab272d; font-size:14px; text-align:center; } #btnarea #button { margin:18px auto; padding: 0; width:90%; height:55px; font-size:22px; letter-spacing:4px; border: 3px solid #ab272d; -moz-border-radius: 13px; -webkit-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; background-color:#f2eff2; } #btnarea #button a { text-decoration:none; text-align: center; padding-top:11px; color:#ab272d; width:100%; height:38px; display:block; } .nhkscoop_link img{ max-width: 390px; max-height: 127px; margin: 0 auto; } }
@charset "utf-8"; #termsofuse { background-color:#fff; margin: 0 auto; padding:15px; line-height:200%; border:2px dotted #d6d4d6; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; letter-spacing:-0.2px; font-size: 14px; } form { margin:20px 0; } #formtable span.req { background-color:#ab272d; color:#fff; padding: 0 5px; } #formtable td input { width:170px; height:40px; /height:auto; border:none; margin: 1px 0; font-size:16px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #formtable td input.long { width:400px; } #formtable td textarea { width:400px; height:160px; border:none; margin: 1px 0; font-size:16px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #formtable td select { border:none; margin: 7px 0; font-size:16px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #formtable div.note { margin-left: 17px; text-indent: -17px; color:#ab272d; } #formtable ul.note { color:#ab272d; margin-left:17px; font-size:12px; } #formtable ul.note li { text-indent: -13px; } .valueDefault {color:#999;} .isEnter {color:#000;} label.error, label.error { /* remove the next line when you have trouble in IE6 with labels in list */ color: red; font-weight:bold; display:block; } #formtable div.error { display: none; } #formtable input.error { border: 2px solid red; } input[type="radio"] { display: none; } .label { position: relative padding: 2px 0 2px 40px; margin-right:5px; } .label:after { position: absolute; /* ボックスの位置を指定する */ content: ""; /* ボックスのコンテンツ */ display: block; /* ブロックレベル要素化する */ top: 50%; /* 上部から配置の基準位置を決める */ left: 15px; /* 左から配置の基準位置を決める */ margin-top: -10px; /* チェック枠の位置 */ width: 16px; /* ボックスの横幅を指定する */ height: 16px; /* ボックスの高さを指定する */ border: 3px solid #fff; /* ボックスの境界線を実線で指定する */ border-radius: 50%; /* ボックスの角丸を指定する */ vertical-align:middle; } .label:hover { color: #ab272d; } input[type="radio"]:checked + .label:after { background: #ab272d; color: #ab272d; /* マウス選択時のフォント色を指定する */ } input[type="radio"] { vertical-align:middle; } @media screen and (min-width: 737px){ span.sp{display: none;} span.pc-ie8{display: none;} #header h2 { left:175px; top:160px; } #formtable td { padding: 5px 0; font-size: 12px; } #formtable td span.tel-text { margin-left:4px; } #formtable th { width:177px; padding: 16px 0 5px 33px; } #formtable th.f_th { padding: 20px 0 5px 33px; } } @media screen and (max-width: 736px){ span.pc-ie8{display: none;} #header h2 { left:50%; top:65%; margin-left:-120px; } #formtable { table-layout:fixed;} #formtable td,th{ width: 100%; display: block; float:left; } .ui-datepicker-calendar th{ width: auto; display: table-cell; float: none; } #formtable td { padding: 15px 0; font-size: 14px; } #formtable td p{padding: 10px 0 0;} #formtable td span.tel-text { display: block; padding-top: 10px; } #formtable td input {width:100%;} #formtable td input.long {width:100%;} #formtable td textarea {width:100%;} #formtable th { width:100%; padding-top: 15px; } #formtable th.f_th { width:39%; } #formtable td.f_td { width:60%; padding-top:0; } #formtable td.f_td p { padding-top:15px; margin-top:0; } } #formtable tr { border-top:2px solid #666; min-height:50px; } #formtable th { font-weight:normal; text-align:left; vertical-align:top; color:#ab272d; }

trの記述や順位を入れ替えてみたり、tdのボーダーを消してみたり、importantを入れたりしてみましたがだめでした。
使用環境はIMAC OSX バージョン10.9.5
DREAMEWEAVER CS6 動作確認はChromeとfirefoxを使用しています。

※Chromeでは効いていることになっているようで、原因が分かりませんでした。

ご回答よろしくお願いいたします。

x_x👍を押しています

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

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

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

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

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

m.ts10806

2018/06/07 05:23

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
dit.

2018/06/07 05:24

teratailではコード等を見やすくするための仕組みがあります。コードの部分を選択して<code>ボタンを押してください。(HTMLを選択して<code>、CSSを選択して<code>)パソコンからの編集の場合、右側にプレビューが出ているはずですので、確認しながら編集してください。https://teratail.com/help/question-tips#questionTips3-5-1
m.ts10806

2018/06/07 05:25 編集

trにborder-topを入れたような記述がありませんが、それは?ブラウザ開発ツールで実際に指定が有効になっているか確認してみてください。もしかしたらtdのborderと重なっているだけかもしれませんし。
dit.

2018/06/07 05:34

質問タイトルにはborder-topを効かせたいと書いていますが、質問文の初めの方に「効かせたい」と書かれているのはborder-bottomのようです。コードのハイライト化のついでにこちらの確認もしてください。また、私の環境ではbodyに指定しているフォント名が文字化けしているようです。実際の記述がどうなっているか、併せてご確認ください。
n2018

2018/06/07 07:49

初めて投稿したため不備が多く申し訳ありませんでした。ご指摘のあった箇所を可能な限り修正しました。ご確認よろしくお願いいたします。
guest

回答1

0

ベストアンサー

Chromeでもつきません(表示されませんというべきか)。
有効にするにはこれを追加します。

CSS

1#formtable { 2 border-collapse: collapse; 3}

https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse

CSS 2.1 仕様 17.6.1 分離ボーダーモデルをご覧ください。
https://www.w3.org/TR/CSS2/tables.html#separated-borders
和訳:http://momdo.s35.xrea.com/web-html-test/spec/CSS21/tables.html#separated-borders

このモデルにおいて、各セルは個々のボーダーを持つ。

(中略)
行、列、行グループ、および列グループはボーダーを持つことができない(すなわち、ユーザーエージェントはそれらの要素のボーダープロパティを無視しなければならない)。

投稿2018/06/07 09:07

x_x

総合スコア13749

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

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

n2018

2018/06/07 09:28

回答ありがとうございました!無事ボーダーが現われました。まさか初期設定が抜けているとは思わず… リンクも大変助かります、本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問