divでtableを作ってみた(レスポンシブ対応)
投稿日:
display: flexでレスポンシブにも対応させた
PCとスマホで見せ方を変えたかったので、cssで調整
PCでは横4列、スマホでは横2列で表示
通常の表が横に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>あ-1<span>2行になる場合</span></div> <div>い</div> <div>い-1</div> <div>う</div> <div>う-1</div> <div>え</div> <div>え-1</div> <div>お</div> <div>お-1</div> <div>か</div> <div>か-1</div> <div>き</div> <div>き-1</div> <div>く</div> <div>く-1</div> <div>け</div> <div>け-1</div> <div>こ</div> <div>こ-1</div> <div>さ</div> <div>さ-1</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; } }
サンプルは以下になります。
関連記事
-
-
簡単にファイルをダウンロードできるWordPressプラグイン
WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …
- PREV
- Google FontsがEdgeで表示されない場合
- NEXT
- 小さい画像をきれいに拡大する