会社概要や、説明などで何かと需要のある表(table)。レスポンシブに対応させ、スマホでも見やすいものを作ってみました。2列のみでIE8以下に対応していません。
こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。
スマホでも見やすいtable
会社名 | ShufuLife-主婦ライフ- |
---|---|
代表者 | ちゅんこ |
所在地 | エックスサーバー |
事業内容 | 主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。 |
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; }
これで、ボーダーをなくし、背景色に上書きしています。うまくいかないときは【エディタ】のスタイル部分が影響していると思われます。
まとめ
2列のみのテーブルですが使い道はいろいろあるかと思います。display:table-cellでやっている為、IE8以下非対応ですのでご了承ください。