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でトップページ(フロントページ)のみ、動きのある画像を表示した …

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

google アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …

カスタムメニュー

WordPress(ワードプレス)でメニューを分ける

    メニューを追加してみる   WordPress管理メニューにある【外観】→【メニュー】に進むとそれぞれのメニューを登録することができますが、今回はあえてメニューを …

レスポンシブWordPressテーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …