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">投稿 <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"> はい</label> <input type="radio" name="radio" value="2" id="no_"><label for="no_" class="label"> いいえ</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では効いていることになっているようで、原因が分かりませんでした。
ご回答よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー