ボックスを並べて表示するにはCSSのフレキシブルボックスレイアウトを使うが、これ以外にもdisplayプロパティを使ってボックスを組み合わせて表のようにすることができる。
[HTML]
<div id="contener"> <div class="tr"> <div class="box">県</div> <div class="box">県庁所在地</div> <div class="box">人口(千人)</div> </div> <div class="tr"> <div class="box">神奈川県</div> <div class="box">横浜市</div> <div class="box">9096</div> </div> <div class="tr"> <div class="box">愛知県</div> <div class="box">名古屋市</div> <div class="box">7455</div> </div> <div class="tr"> <div class="box">千葉県</div> <div class="box">千葉市</div> <div class="box">6192</div> </div> <div class="tr"> <div class="box">沖縄県</div> <div class="box">那覇市</div> <div class="box">1421</div> </div> <div class="tr"> <div class="box">香川県</div> <div class="box">高松市</div> <div class="box">981</div> </div> <div class="tr"> <div class="box">鳥取県</div> <div class="box">鳥取市</div> <div class="box">574</div> </div> </div>
[CSS]
#contener {
display:table;
border:solid 0.5px #000;
}
.tr {
display:table-row;
}
.box {
display:table-cell;
padding:5px;
border:solid 0.5px #000;
}
サンプル
県
県庁所在地
人口(千人)
神奈川県
横浜市
9096
愛知県
名古屋市
7455
千葉県
千葉市
6192
沖縄県
那覇市
1421
香川県
高松市
981
鳥取県
鳥取市
574