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 テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …

トグルメニュー

WordPressのメニューをおもしろくしてみた

    トグルメニュー(アコーディオンメニュー)の準備   WordPressのテーマに子テーマを作って、 そこで変更や追加をした方が安心安全なので以下の作業は子テーマを …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …