2017年4月20日

工藤

コピペ可！CSSだけでレスポンシブテーブルをつくろう

マークアップ

facebook
twitter

こんにちは工藤です。
今回はレスポンシブのテーブルの組み方の1例をご紹介します。

PC表示の時はこんな感じです。

1 PC表示の時
2 スマートフォン表示の時
3 ソースコード
4 ポイント
5 YoutubeChannelのご紹介

PC表示の時

今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。

スマートフォン表示の時

tbody内のtdの箇所に、theadの項目を表示させてみました。
ソースは下記のようになります。

ソースコード

html

  <table class="table01">
    <thead>
      <tr>
        <th></th>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>項目1</th>
        <td label="ヘッダー1"><p>項目1の内容<br />
            これで長くなった時に対応できます。</p></td>
        <td label="ヘッダー2"><p>項目1の内容</p></td>
        <td label="ヘッダー3"><p>項目1の内容</p></td>
      </tr>
      <tr>
        <th>項目2</th>
        <td label="ヘッダー1"><p>項目2の内容</p></td>
        <td label="ヘッダー2"><p>項目2の内容</p></td>
        <td label="ヘッダー3"><p>項目2の内容</p></td>
      </tr>
      <tr>
        <th>項目3</th>
        <td label="ヘッダー1"><p>項目3の内容</p></td>
        <td label="ヘッダー2"><p>項目3の内容</p></td>
        <td label="ヘッダー3"><p>項目3の内容</p></td>
      </tr>
    </tbody>
    <tr></tr>
  </table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

これで長くなった時に対応できます。</p></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

css

table.table01 {
	width:100%;
	border-right:#3EB1C6 solid 1px;
	border-collapse: collapse;
}
table.table01 thead th {
	background:#3EB1C6;
	color:#FFF;
	padding:10px 15px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
table.table01 thead th:last-child {
	border-right:#3EB1C6 solid 1px;
}
table.table01 tbody th {
	background:#3EB1C6;
	color:#FFF;
	padding:10px 15px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
table.table01 tbody tr:last-child th {
	border-bottom:#3EB1C6 solid 1px;
}
table.table01 tbody td {
	background:#FFF;
	padding:10px 15px;
	border-left:#3EB1C6 solid 1px;
	border-bottom:#3EB1C6 solid 1px;
	vertical-align:top;
}

@media screen and (max-width: 640px) {
table.table01 thead {
	display:none;
}
table.table01 tbody th {
	display:block;
}
table.table01 tbody td {
	display:block;
}
table.table01 tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	font-weight:bold;
}
table.table01 tbody td p {
	padding-left:6em;
}
}

table.table01 {

width:100%;

border-right:#3EB1C6 solid 1px;

border-collapse: collapse;

}

table.table01 thead th {

background:#3EB1C6;

color:#FFF;

padding:10px 15px;

border-right:#FFF solid 1px;

border-bottom:#FFF solid 1px;

}

table.table01 thead th:last-child {

border-right:#3EB1C6 solid 1px;

}

table.table01 tbody th {

background:#3EB1C6;

color:#FFF;

padding:10px 15px;

border-bottom:#FFF solid 1px;

vertical-align:top;

}

table.table01 tbody tr:last-child th {

border-bottom:#3EB1C6 solid 1px;

}

table.table01 tbody td {

background:#FFF;

padding:10px 15px;

border-left:#3EB1C6 solid 1px;

border-bottom:#3EB1C6 solid 1px;

vertical-align:top;

}

@media screen and (max-width: 640px) {

table.table01 thead {

display:none;

}

table.table01 tbody th {

display:block;

}

table.table01 tbody td {

display:block;

}

table.table01 tbody td::before {

content: attr(label);

float: left;

clear:both;

font-weight:bold;

}

table.table01 tbody td p {

padding-left:6em;

}

DEMO

ポイント

レスポンシブ時にtheadは非表示にします。
tbody内thとtdはブロック要素にして、幅を100%に設定します。
これでそれぞれ横に広がった状態になります。

theadを非表示にした代わりに、今回はtbody内tdにlabelで設定したtheadの項目名をcontentを使って表示させます。
:first-child等を使ってcontentに直接項目名を入れてもいいと思うのですが、時と場合によるかと思うのでその時は適宜調整してください。

tdの中のテキストはブロック要素にするため今回はpタグで括っておきます。
contentをfloatさせておくので、pタグはpaddingで文字数+隙間分設定します。
これで文字数が多い時にでも対応できるレスポンシブのテーブルが完成します。

テーブル内でpタグで括るのが煩わしければ、contentをブロック要素にして改行して表示させるのもありだと思います。
（というかスマホの表示領域を考えるとその方がよいかも）

割と簡単にできるので、どうぞ試してみてください。