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

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

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

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

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

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

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

demo

PCのデザイン

レスポンシブ対応 CSS で作るシンプルな テーブル デザイン

スマホのデザイン

table レスポンシブ css

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のデザイン

table レスポンシブ css

スマホのデザイン

table レスポンシブ css

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 についてはこちら

この記事を読んだ人は、こんな記事も読んでいます。