Q&A
「高さを可変」とは具体的にどの部分をどういう操作で動かすのでしょうか。
CSSでTableの高さを可変にするにはどうすればよいでしょうか？
現在こちらを作成しています。
幅は width="100%"で可変にできたのですが
縦が上手く行きません。
どうすればよいでしょうか？
form.html
html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>お問い合わせフォーム</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9 10<body> 11 12 <div class="container"> 13 <!-- ロゴ画像 --> 14 <a href="index.html"><img src="img/logo.png" alt="SOLT inc."></a> 15 16 <!-- 見出し --> 17 <h2 class="heading">お問い合わせフォーム</h2> 18 19 <!-- フォーム内容 --> 20 <form action="checkgetpara.html" method="get"> 21 <table border="1" width="100%" height="550px"> 22 23 <tr> 24 <td class="inquiry">名前</td> 25 <td><input type="text" name="name" size="20" class="name"></td> 26 </tr> 27 28 <tr> 29 <td class="inquiry">性別</td> 30 <td><label><input type="radio" name="sex" class="sex" value="男">男 </label><label><input type="radio" name="sex" value="女">女</label></td> 31 </tr> 32 33 <tr> 34 <td class="inquiry">血液型</td> 35 <td><select name="blood" class="blood"> 36 37 <option value="A型">A型</option> 38 <option value="B型">B型</option> 39 <option value="O型">O型</option> 40 <option value="AB型">AB型</option> 41 42 </select> 43 </td> 44 </tr> 45 46 <tr> 47 <td class="inquiry">お問い合わせ内容</td> 48 <td><textarea rows=7 cols=70 name="contact" class="contact"></textarea></td> 49 </tr> 50 51 52 </table> 53 54 <div class="submit"> 55 <input type="submit" value="送信する" class="submit-botton"> 56 </div> 57 58 </form> 59 60 61 62 63 64 65 </div> 66 67</body> 68 69</html> 70
style.css
css
1/* 以下は form.html のcss */ 2 3.heading { 4 border-bottom: 2px solid black; 5} 6 7.inquiry { 8 background-color: #fa8072; 9 padding-left: 20px; 10} 11 12.name { 13 font-size: 130%; 14} 15 16.name, .sex, .blood, .contact { 17 margin-left: 30px; 18} 19 20.submit { 21 text-align: center; 22 margin-top: 30px; 23} 24 25.submit-botton { 26 padding: 15px 100px; 27 background-color: #c93a40; 28 display: inline-block; 29 text-decoration: none; 30 color: #FFF; 31 border-bottom: solid 4px #627295; 32 border-radius: 5px; 33} 34 35.submit-botton:active { 36 -ms-transform: translateY(4px); 37 -webkit-transform: translateY(4px); 38 transform: translateY(4px);/*下に動く*/ 39 box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);/*影を小さく*/ 40 border-bottom: none; 41} 42
回答3件
0
ベストアンサー
CSS
1table { 2 height: 100vh; 3} 4```**動くサンプル：**[https://jsfiddle.net/c8tc23dL/](https://jsfiddle.net/c8tc23dL/)
投稿2018/01/17 11:33
総合スコア69398
0
tableは属性に直接heightいれるとcssで変えにくくなりますよ
html
1<!--<table border="1" width="100%" height="550px">--> 2<table border="1" width="100%">
ここ外せばcssで
css
1td{ 2 height:50px; 3}
とか効いてくれます。
投稿2018/01/12 13:53
総合スコア3828
0
table-layoutプロパティを使ってみてはどうでしょうか？
table-layout: fixed;を使えば、Widthで指定した幅以上は横には広がらなず、高さは、
セル内に入った文字により自動的に調整されるはずです。その際、word-wrap: break-word;も入れて下さい。そうしないと、文字が重なってしまいます。
CSS
1table { 2 width: ■■px; 3 table-layout: fixed; 4 word-wrap: break-word; 5}
投稿2018/01/12 12:46
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
