Q&A
背景色の変更の部分をtd要素いっぱいにしたいのが目的なら、tdに背景つけるので良いかと思うのですが、それではいけないのでしょうか。
divを高さいっぱいにしたいのが目的でしょうか。
前提・実現したいこと
テーブルの中のtd要素の高さいっぱいにdiv要素の高さを合わせたいです。
2つのdiv要素の背景色を変更していますが、
1つ目のdiv要素の背景色の変更の部分をtd要素いっぱいにしたいです。
どのように解決すればよいか、お教え願いますでしょうか。
該当のソースコード
HTML
1<html> 2<head> 3 <title>テーブルのサンプル</title> 4 5 <style type="text/css"> 6 7 table, td, th { border: 2px #808080 solid; } 8 9 .sampleCell{ 10 background:#c1c1ff; 11 } 12 13 table { 14 height: 0 auto; 15 } 16 17 table div { 18 height: 100% 19 } 20 21 </style> 22</head> 23<body> 24 <table> 25 <tr> 26 <td> 27 <div class="sampleCell">あいうえお</div> 28 </td> 29 <td> 30 <div class="sampleCell"> 31 あいうえお<br /> 32 かきくけこ<br /> 33 さしすせそ 34 </div> 35 </td> 36 </tr> 37 </table> 38</body> 39</html> 40
試したこと
table要素でheight: 0 auto; div要素でheight: 100%を
それぞれ指定したのですが、うまくいきませんでした。
また、table要素、td要素、div要素にそれぞれheight:100%を指定してみたのですが、
テーブルの高さが意図しないで長くなってしまった（画面いっぱいの高さ）ので、
レイアウトを崩さず、div要素の高さをtd要素の高さいっぱいにする方法を探しています。
補足情報
ブラウザはGoogle Chromeで確認しています。
目的はdivの高さをいっぱいにしたいことです。
わかりづらくてすみませんでした。
「sampleCell」というクラスは、divにもtdにもどちらにもつくんですか？
すみません。div要素につけるつもりがtd要素についていました。
本文も修正しました。
https://qiita.com/nasum/items/28ca94ac42e5445e2d0a
一応、まんまのことしてたページ見つけました。
SCSSなのでCSSに変換してみてください。
height: 100%;は、適宜数値を変えるなりpxにするなりしてみてください。
ありがとうございます。該当のページのようにCSSを記述したらいけました。
回答1件
0
ベストアンサー
css
1table { 2 height: 1px; /* 文字の高さ以下の任意の値を指定 */ 3} 4 5table td { 6 height: 100%; 7} 8 9table div { 10 height: 100%; 11}
でいけるかと思いますが、どうしてもtableで組まないといけない部分なのでしょうか。
そうでなければdivで組んでdisplay:table;やflexなどを使った方が自由度が高いはずですが。
投稿2019/02/01 13:34
総合スコア1907
あなたの回答
tips
プレビュー
