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

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

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

スマホでも見やすいtable

PCでの表示

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

スマホでの表示

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

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

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

まとめ

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