CSS ：レスポンシブ対応 css でデザインするシンプルなテーブル【CSS table】

CSS のみでデザインした、レスポンシブ対応のシンプルなテーブルデザインです。

多くのwebサイトでテーブルが使われますが、基本的に HTML と CSS だけで表現しなければいけないのでデザインに制限があり、webデザイナーも頭を悩ませる要素の一つです。

そこで今回は HTML と CSS だけで実装できるテーブルデザインをまとめてみました。CSS をコピペですぐ反映できるようになっているのでぜひ活用してみてください！

レスポンシブ対応で縦組みになるパターンと、テーブルの縦と横を切り替えるパターンと、テーブルをスクロールするパターンのデザインをデモ付きで紹介しています。

css でデザインするレスポンシブ対応のシンプルなテーブル

cssのみでデザインした、レスポンシブ対応のシンプルなテーブルです。
スマホは縦組みになります。

demo

PCのデザイン

スマホのデザイン

CSS

<style>
#demo{
width: 700px;
}

#demo table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th,
#demo table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th{
width: 35%;
background: #eee;
}


@media screen and (max-width:768px){
#demo{
width: 100%;
}

#demo table,
#demo table tbody,
#demo table tr,
#demo table tr th,
#demo table tr td{
display: block;
}

#demo table{
width: 100%;
border-width: 0 0 1px 0;
}

#demo table tr th,
#demo table tr td{
width: 90%;
padding: 3% 5%;
}

#demo table tr td{
border-width: 0px 1px 0px 1px;
}
}
</style>

HTML

<div id="demo">
<table>
<tbody>
<tr>
<th>SAMPLE</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>SAMPLE</th>
<td>コンテンツ</td>
</tr>
<tr>
<th>SAMPLE</th>
<td>コンテンツ</td>
</tr>
</tbody>
</table>
</div>

レスポンシブ対応でテーブルの縦と横を切り替える

横並びのテーブルを、スマホでは縦並びに切り替えます。

demo

PCのデザイン

スマホのデザイン

CSS

<style>

#demo{
width: 700px;
}

#demo table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th,
#demo table tr td{
padding: 0.5em;
text-align: center;
vertical-align: middle;
border: solid #CCC;
border-width: 1px;
}
#demo table tr th{
background: #eee;
}


@media screen and (max-width:768px){
#demo{
width: 100%;
}

#demo table tbody,
#demo table tr thead,
#demo table tr,
#demo table tr th,
#demo table tr td{
display: block;
}

#demo table{
width: 100%;
border-width: 0 1px 1px 0;
}

#demo table tr th,
#demo table tr td{
padding:0.5em;
border-width: 1px 0 0 1px;
}

#demo table thead{
float: left;
width: 30%;
}
#demo table thead tr{
width: 100%;
}
#demo table tbody{
float: left;
width: 70%;
}
#demo table tbody tr{
width: 33.3%;
}
#demo table tbody tr{
float: left;
}
}
</style>

HTML

<div id="demo">
<table>
  <thead>
    <tr>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  <th>見出し</th>
  </tr>
  </thead>
  <tbody>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
    <tr><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td><td>〇</td></tr>
  </tbody>
</table>
</div>

詳しい CSS についてはこちら