wordpress

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

投稿日:

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;
}
}

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

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


 


-wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

svg div 変形

SVG div で変形を作る

  簡単に変形してダウンロード   おもしろいサイトを見つけましたので、紹介します。   説明をするより、サイトを開いて実用化するのはあなた次第(笑) トップページのヘッ …

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …