divでtableを作ってみた（レスポンシブ対応）

投稿日：2020年10月21日

divでtableを作ってみた

display: flexでレスポンシブにも対応させた

PCとスマホで見せ方を変えたかったので、cssで調整

PCでは横4列、スマホでは横2列で表示

通常の表が横に２つ並んでいるようなものを縦型に変えていきます。

早速、htmlの部分です。

<div class="table-a wrap">
<div class="table-th">タイトルA</div>
<div class="table-th">タイトルB</div>
<div class="table-th noth">タイトルA</div>
<div class="table-th noth">タイトルB</div>
<div>あ</div>
<div>あ－１<span>2行になる場合</span></div>
<div>い</div>
<div>い－１</div>
<div>う</div>
<div>う－１</div>
<div>え</div>
<div>え－１</div>
<div>お</div>
<div>お－１</div>
<div>か</div>
<div>か－１</div>
<div>き</div>
<div>き－１</div>
<div>く</div>
<div>く－１</div>
<div>け</div>
<div>け－１</div>
<div>こ</div>
<div>こ－１</div>
<div>さ</div>
<div>さ－１</div>
</div>

続いて、cssの部分です。

.wrap{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-direction:normal;
    -webkit-flex-direction:row;
    flex-direction:row;
	-ms-flex-wrap:wrap;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}
.table-a{ /*表の外枠*/
border-top:1px solid #999;
border-left:1px solid #999;
}
.table-a.wrap div:nth-child(odd){ /*子要素（セル部分）奇数指定*/
width: 25%;
border-right:1px solid #999;
border-bottom:1px solid #999;
line-height:3.6;
}
.table-a.wrap div:nth-child(even){ /*子要素（セル部分）偶数指定*/
width: 75%;
border-right:1px solid #999;
border-bottom:1px solid #999;
line-height:1.8;
}
.table-a.wrap div{ /*テキスト中央*/
text-align:center;
}
.table-a.wrap div span{
display:block;
font-size:14px;
}
.table-a.wrap .table-th{ /*見出しの背景*/
background:#f5f5f5;
line-height:3.6 !important;
}
.table-a.wrap .table-th.noth{ /*スマホの時に非表示*/
display:none;
}
@media screen and (min-width: 769px) { /*pcおよびタブレットの場合*/

.table-a.wrap div:nth-child(odd){
width: 12%;
padding:1rem 0.5rem;
}
.table-a.wrap div:nth-child(even){
width: 38%;
padding:1rem 0.5rem;
}
.table-a.wrap .table-th.noth{
display:table-cell;
}
}

サンプルは以下になります。

See the Pen
rNLMQQp by show-be (@show-be)
on CodePen.

執筆者：web