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

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

関連記事

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

子テーマ functions.php

WordPress 子テーマのcssを読み込む

  親テーマのスタイルシート【style.css】の上部には、各テーマによって若干違いはあるが、以下のような記述があると思います。 @charset “UTF-8”; /*——— …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

cssのcolumnでフロントページにランダム表示

CSSのcolumnでフロントページにランダム表示

  トップページに投稿記事をランダムに表示   通常トップページに表示するのは、 ・固定ページ ・投稿記事 のどちらかが多いと思いますが、 今回は投稿記事の新着順ではなく、ランダム …