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

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

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

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>