HTML 2014-11-18

HTMLのtable(テーブル)要素をレスポンシブにする

rt

今では、レスポンシブになっているサイトを多くなったと思いますし、
特にブログ系のサイトは、レスポンシブが多いですね。
当サイトは、レスポンシブではありませんが・・・

レスポンシブにするにあたって、意外と面倒なのが、tableのスタイルなんですよねwww意外とね・・・
table要素の幅をautoにしてもいいのですが、はっきりといってスマホでは見にくいの【一言】です。
もうなんて書いてあるのかさえ、読みたくないです。www
なので、今回はtable要素をレスポンシブにして、スマホでも見やすくしっかりと見出しセルも表示させる実装方法のご紹介です。

下記にデモサイトもありますので、参考の足しになればと思います。

デモサイト

HTMLのtable要素をレスポンシブに実装

それでは、table要素をレスポンシブに実装していきたいと思います。

HTML

まずは、HTMLの準備をします。
table要素には、クラス名をつけています。

	<table class="responsive-table">
		<thead>
			<tr>
				<th>WPテーマ名</th>
				<th>WPテーマタイプ</th>
				<th>料金</th>
				<th>リリース日</th>
			</tr>
		</thead>
        <tr>
        	<td>WPテーマ【1】</td>
            <td>ブログ</td>
            <td>無料</td>
            <td>2014-11-18</td>
        </tr>
        <tr>
        	<td>WPテーマ【2】</td>
            <td>ビジネス</td>
            <td>無料</td>
            <td>2014-11-20</td>
        </tr>
        <tr>
        	<td>WPテーマ【3】</td>
            <td>ポートフォリオ</td>
            <td>2.980</td>
            <td>2014-12-18</td>
        </tr>
        <tr>
        	<td>WPテーマ【4】</td>
            <td>eコマース</td>
            <td>3.980</td>
            <td>2014-12-20</td>
        </tr>
        <tr>
        	<td>WPテーマ【5】</td>
            <td>ブログ</td>
            <td>2.980</td>
            <td>2014-12-25</td>
        </tr>
    </table>

CSS

最後にCSSでテーブル要素のスタイルやMedia Queriesを使ってレスポンシブにしていきます。
今回のブレイクポイントは【768px】に設定してありますが、ご自身の環境によっては、変更して下さい。
また、CSS3のセレクタ【:nth-of-type()】と【:before】で各見出しセルを表示させていますので、利用する場合は、ご自身の環境に合った言葉などを記載して下さい。

/*---------------------------------------------------------
  			  responsive table
---------------------------------------------------------*/
.responsive-table{
	width: 100%;
	border: 1px solid #ddd;
	border-collapse: collapse;
	table-layout: fixed;
	background:#fff;
	}
.responsive-table thead{
	background:#000;
	color:#fff;	
	}
.responsive-table tr:nth-child(even) {
	background: #f5f5f5;
}
.responsive-table th,.responsive-table td{
	padding:15px;
	border-top: 1px solid #ddd;
	text-align:left;
	}
@media screen and (max-width: 768px) {

.responsive-table thead{
	display:none;
	}
.responsive-table tr,
.responsive-table th,
.responsive-table td {
		display: block;
	}
.responsive-table td {
		border-top: none;
	}
.responsive-table tr td:first-child {
		border-top: 1px solid #ddd;
	}
.responsive-table td:before {
		display: block;
		font-weight: bold;
	}
.responsive-table td:nth-of-type(1):before {
		content: "WPテーマ名";
	}
.responsive-table td:nth-of-type(2):before {
		content: "WPテーマ名";
	}
.responsive-table td:nth-of-type(3):before {
		content: "料金";
	}
.responsive-table td:nth-of-type(4):before {
		content: "リリース日";
	}
	
	}

上記までを記載すれば、HTMLのtable要素のレスポンシブの完了となります。
デモサイトなどを見てもらってもわかるように、幅を縮小してもテーブル要素内の文字などは見やすくなったと思います。
是非、Webサイトはレスポンシブだけどテーブル要素がちょっと・・という方は、上記を試してみてはいかがですか?
下記にデモサイトもありますので、ご参考の足しにでもして下さい。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS slide-menu

プラグインは使わずスマホのメニューに実装 jQuery 水平スライドメニュー

NEXT hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.ナックル&シュート(上級) を攻略したパーティメンバー