表を作成する際に上段(タイトル)の大きさに合わせた値を入れるセルを作成したいのですが指定の仕方に悩んでいます。
下記のコードのようにすると、下段の値が空の場合、セルの大きさが極端に狭くなってしまいます。
これを上段のセルの大きさに合わせるには.Valueのほうのwidthにautoを入れてみようと思い入れてみたのですが、空のセルは極端に狭いままです。
タイトルの大きさに合わせたセルの大きさにする際のプロパティの指定の仕方をご教授いただければ幸いです。
※
現在はインラインで値をそのまま入れてますが、本番はmodelから値を引っ張ってくる予定なのでclass名はこのまま変えたくありません。
html
1 2 <div class="Header"> 3 <div class="sokutei">測定日</div> 4 <div class="weather">天気</div> 5 <div class="temp">温度</div> 6 <div class="humid">湿度</div> 7 <div class="tanntou">担当者</div> 8 </div> 9 <div class="Value"> 10 <div class="sokutei">12/1</div> 11 <div class="weather">晴れ</div> 12 <div class="temp"></div> 13 <div class="humid"></div> 14 <div class="tanntou">タナカ</div> 15 </div>
css
1.Header { 2 display: table; 3 width: 300px; 4} 5 6 .Header > div { 7 display: table-cell; 8 border: 1px solid #000000; 9 10 } 11 12.Value { 13 display: table-row; 14 width: 300px; 15} 16 17 .Value > div { 18 display: table-cell; 19 border: 1px solid #000000; 20 }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/09 22:24
2018/10/09 22:30
2018/10/10 01:22