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

res-table1

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

スポンサーリンク


[toc]

スマホでも見やすい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がお送りしましたー

Recommendこの記事もおすすめです!

Please Share!!

この記事のタイトルとURLをコピーする

記事タイトルレスポンシブのテーブルをcssで作ってみた(2列のみ)STINGER5対応
記事URLhttps://shufulife.com/res-table/

お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。
res-table1

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

最新記事をお知らせします
WordPress

公開日:2014/10/8