レスポンシブのテーブルをcssで作ってみた(2列のみ)STINGER5対応

 2014/10/08

res-table1
会社概要や、説明などで何かと需要のある表(table)。レスポンシブに対応させ、スマホでも見やすいものを作ってみました。2列のみIE8以下に対応していません

スポンサーリンク


スマホでも見やすいtable

表はこんな感じです。画面の幅を変えてみてください。

会社名 ShufuLife-主婦ライフ-
代表者 ちゅんこ
所在地 エックスサーバー
事業内容 主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。

PCでの表示

PCではおなじみの表示です。

res-table3

スマホでの表示

スマホではこのように1列になり、幅の狭い画面でも見やすくしました。

res-table2

HTML部分

<div  class="res-table">
<table>
<tr>
<th>左側1</th>
<td>右側-1</td>
</tr>
<tr>
<th>左側2</th>
<td>右側-2</td>
</tr>
<tr>
<th>左側3</th>
<td>右側-3</td>
</tr>
</table>
</div>

css部分

/*--------------------------------------
  スマホでの表示
--------------------------------------*/
.res-table{
width:95%;
margin:2em auto;
border:#6699ff 1.5px solid;
}
.res-table th{
padding:3px;
display:block;
background-color:#ccddff;
}
.res-table td{
padding:5px;
display:block;
text-align:center;
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*--------------------------------------
PCでの表示
--------------------------------------*/
.res-table{
width:100%
margin:5px auto;
font-size:90%;
border:#6699ff 1.5px solid;   
}
.res-table tr{
border-bottom:#6699ff 1px solid;
}
.res-table tr:last-child{
border:none
}
.res-table th{
width:40%;   
padding:5px 10px;
display:table-cell;
border-right:#6699ff 1px solid;
text-align: left;
}
.res-table td{
width:60%;   
padding:5px 10px;
display:table-cell;
text-align: left;
}
}	

『スマホでの表示』の部分と『PCでの表示部分』はご自身のサイトのCSSに合わせて記述してください。

STINGER5の場合は。。。

/*レイアウト スマートフォンよりに『スマホでの表示』。/*media Queries PCサイズに『PCでの表示部分』を記述してください。

STINGER5ではcssの【エディタ】の部分にテーブルのスタイルが記述していますので、そのまま上記のコードを貼り付けても【エディタ】のボーダーなどが適応されてしまいます。以下のコードを『スマホでの表示』の上に記述し、一旦【エディタ】のスタイルを無効にします。

/*STINGER5エディタのテーブルのスタイル解除*/
.res-table table  td {
border:none;
background-color:#FFF;
}
main .post .res-table table {
border:none;
}

これで、ボーダーをなくし、背景色に上書きしています。うまくいかないときは【エディタ】のスタイル部分が影響していると思われます。

まとめ

2列のみのテーブルですが使い道はいろいろあるかと思います。display:table-cellでやっている為、IE8以下非対応ですのでご了承ください。

それではちゅんこ@shufulifeがお送りしましたー

STNGER5

Please comment!

  

Messege




現在トラックバックはありません。