Twitterはこちら仕事依頼はこちら

【HTML/CSS】スマホに特化したテーブルデザイン!コピペで簡単

スマホで見やすいテーブルデザイン HTML&CSS

比較表第2弾!スマホに特化したテーブルデザインを作りました!

第1弾がこちら!

関連 tableタグを使わない比較表デザイン!

前回はtableタグを使わずに比較表を作る方法を紹介しました。

今回はtableタグを使って表を作りますがtableタグってスマホでみると「ギューっ」って詰まって見にくくなることありませんか?

調整するのも面倒でなるべく使いたくないって人もいるのではないでしょうか。

そこで今回、HTML、CSSがわからなくてもコピペで使えるレスポンシブのテーブルを作りました。

レスポンシブとは?

画面のサイズに合わせてデザインが変わること

レスポンシブというよりスマホ中心で作られているのでPCでも見た目は変わりません。

さらにスマホでは見出しを固定追尾できるようにしました。

実際にスマホで見てもらうとわかると思います。PCでは固定追尾しません。

デフォルトのデザインがこちらです。

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。

スマホで見るとA社、B社がスクロール時に画面にくっついてきたと思います。

当ブログのようにヘッダーを固定してる場合やGoogleアドセンスのアンカー広告を利用してる場合は被ってしまうため位置をズラすか、追尾をさせないことをオススメします。

注意!

overflow:hidden;を使っている一部の環境(JINなど)では固定追尾が使えません。表としては利用可能です。

それではHTML、CSSコードを紹介していきます!

修正情報

2019/07/25:隙間ができる不具合修正(HTMLのみ)

スポンサーリンク

スマホに特化したテーブルデザインの作り方

まずはCSSをコピペします!

まずはCSSをコピペ!

CSSは必須コードと拡張コードで分けました。

色を変更したパターンや画像を使ったパターンを使いたい場合は拡張コードもコピペしてください。

メモ

WordPressの場合は「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSS必須コード

/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  max-width:600px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  font-size:14px;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  background:#f8f9fb;
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width:50%;
}
.comparison-table table thead th{
  background : #d1d1d1;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
}
.comparison-table table tbody th{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  font-size: 14px;
  line-height: 1.3;
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:1.2em;
  color: #555;
  line-height: 1.8;
  text-align:justify;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#33ccff;
  font-size: 16px;
  margin-bottom:7px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }
}

CSS拡張コード

後で紹介する色違いや画像比較などを使いたい場合はこちらのコードもコピペしてください。


/************************************
** スマホ特化比較表(ピンク)
************************************/
/* 大見出し背景 */
.comparison-table-pink .comparison-table-title{
  background:#f7bcbc!important;
}
/* 中見出し背景 */
.comparison-table-pink .comparison-table table tbody th{
  background:#f7bcbc!important;
}
/* 強調文字 */
.comparison-table-pink .comparison-table table tbody td .td-h{
  color:#f7bcbc!important;
}
/* 全体背景 */
.comparison-table-pink .comparison-table{
background:#fdf1f1!important;
}
/* 比較名背景 */
.comparison-table-pink .comparison-table table thead th{
  background:#d1baba!important;
}
/************************************
** スマホで見やすい比較表(イエロー)
************************************/
/* 大見出し背景 */
.comparison-table-yellow .comparison-table-title{
  background:#fdc44f !important;
}
/* 中見出し背景 */
.comparison-table-yellow .comparison-table table tbody th{
  background:#fdc44f !important;
}
/* 強調文字 */
.comparison-table-yellow .comparison-table table tbody td .td-h{
  color:#fdc44f !important;
}
/* 全体背景 */
.comparison-table-yellow .comparison-table{
background:#fef9ed!important;
}
/* 比較名背景 */
.comparison-table-yellow .comparison-table table thead th{
  background:#d4c096 !important;
}
/************************************
** スマホで見やすい比較表(グリーン)
************************************/
/* 大見出し背景 */
.comparison-table-green .comparison-table-title{
  background:#2fcdb4 !important;
}
/* 中見出し背景 */
.comparison-table-green .comparison-table table tbody th{
  background:#2fcdb4 !important;
}
/* 強調文字 */
.comparison-table-green .comparison-table table tbody td .td-h{
  color:#2fcdb4 !important;
}
/* 全体背景 */
.comparison-table-green .comparison-table{
background:#eafaf7 !important;
}
/* 比較名背景 */
.comparison-table-green .comparison-table table thead th{
  background:#97c7bf !important;
}
/************************************
** スマホで見やすい比較表(シンプル)
************************************/
/* 大見出し背景 */
.comparison-table-simple .comparison-table-title{
  box-shadow:none !important;
}
/* 中見出し背景 */
.comparison-table-simple .comparison-table table tbody th{
  box-shadow:none !important;
}
/* 全体背景 */
.comparison-table-simple .comparison-table{
  background:none !important;
}
/* 比較名背景 */
.comparison-table-simple .comparison-table table thead th{
  box-shadow:none !important;
}
/* コンテンツ背景 */
.comparison-table-simple .comparison-table table tbody td{
  box-shadow:none !important;
  padding: 0.5em 1em;
}
/************************************
** スマホで見やすい比較表(画像比較)
************************************/
/* 比較名背景 */
.comparison-table-img .comparison-table table thead th{
  box-shadow:none !important;
  padding:0;
  margin:0;
}
.comparison-table-img .comparison-table table thead tr{
  background:none !important;
}
.comparison-table-img .comparison-table table thead th img{
  display:block;
}
.comparison-table table thead th p{
  margin:0;
}
/* 画像タイトル */
.comparison-table-img .comparison-table table thead th .th-h{
  color:#fff;
  padding-top:10px;
  margin-bottom:10px;
  font-size:14px;
}
/************************************
** スマホで見やすい比較表(固定追尾なし)
************************************/
@media screen and (max-width: 768px){
  .no-sticky .comparison-table table thead th{
    position:static;
  }
}

デザイン:ベーシック

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

行を増やしたいときは12行目から22行目をコピーして33行目と34行目の間に貼り付けてください。

デザイン:色変更(イエロー)

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-yellow">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

変更点は1行目のみです。comparison-table-yellowというclassが追加されています。

デザイン:色変更(ピンク)

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-pink">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

変更点は1行目のみです。comparison-table-pinkというclassが追加されています。

デザイン:色変更(グリーン)

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-green">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

変更点は1行目のみです。comparison-table-greenというclassが追加されています。

デザイン:フラット

A社とB社を徹底比較
A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-simple">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

変更点は1行目のみです。comparison-table-simpleというclassが追加されています。

デザイン:タイトルなし

A社B社
料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap">
<div class="comparison-table">
<table>
<thead>
<tr>
<th>比較A</th>
<th>比較B</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class=”comparison-table-title”>タイトル</div>を削除すればタイトルなしになります。

デザイン:画像比較

A社とB社を徹底比較

スマートスピーカーA

スマートスピーカーB

料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-img">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>
<p class="th-h">比較A</p>
ここに画像挿入
</th>
<th>
<p class="th-h">比較B</p>
ここに画像挿入</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

1行目のクラスにcomparison-table-img追加。

あとは画像の見出し追加。画像はWordPressの場合、メディアを追加からでOKです。

デザイン:追尾解除+組み合わせる

A社とB社を徹底比較

スマートスピーカーA

スマートスピーカーB

料金の比較

¥300/月

コスパではNo.1!料金で選ぶならA社がオススメ!

¥1,000/月

料金は他社と比較すると高い。質を考えれば納得の値段!

質の比較

良い

安いため質に不安があったが全く気になりません。

とても良い

最高の質を求めてる方は間違いなくB社がオススメです。

サポートの比較

最低限の保証

サポートは悪くもないが良いとも言えない。気になる人にはオススメできません。

24時間対応

サポセンが24時間対応してるので急に困ったときでも安心して利用できる。


<div class="comparison-table-wrap comparison-table-green comparison-table-img no-sticky">
<div class="comparison-table-title">タイトル</div>
<div class="comparison-table">
<table>
<thead>
<tr>
<th>
<p class="th-h">比較A</p>
ここに画像挿入
</th>
<th>
<p class="th-h">比較B</p>
ここに画像挿入</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">1行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">1行目比較A 強調文字</p>
1行目比較A コンテンツ</td>
<td>
<p class="td-h">1行目比較B 強調文字</p>
1行目比較B コンテンツ</td>
</tr>
<tr>
<th colspan="2">2行目見出し</th>
</tr>
<tr>
<td>
<p class="td-h">2行目比較A 強調文字</p>
2行目比較A コンテンツ</td>
<td>
<p class="td-h">2行目比較B 強調文字</p>
2行目比較B コンテンツ</td>
</tr>
</tbody>
</table>
</div>
</div>

追尾させたくない場合は1行目にクラスno-stickyを追加すればOKです。

さらに色をグリーンに、画像比較をしたい場合は1行目に先ほど紹介したcomparison-table-greenとcomparison-table-imgを追加してください。

WordPressで利用する方法

HTMLはどこに入力すればいいのかという質問をよくされます。

HTMLは投稿画面でコードエディター(テキストエディタ)に貼り付ければOKです。

◎ Gutenberg

gutenbergコードエディタ

◎ 従来のエディター

テキストエディタ

毎回入力が面倒って場合はAddQuicktagが便利

WordPressを利用してる人はプラグイン「AddQuicktag」がオススメです。

HTMLを登録しておけば、いつでもワンクリックで呼び出すことができます。

詳しくは下記記事をご覧ください。

あわせて AddQuicktagの使い方と設定方法!

AddQuicktagの使い方と設定方法!Gutenbergでの使い方も紹介するよ!
AddQuicktagの使い方と設定方法をわかりやすく説明します!WordPressの必須プラグインと言われているAddQuicktag!設定は簡単で超便利、超時短になります。Gutenbergでの使い方も紹介します!

導入済みのブログ、サイト紹介させてください

「この記事を見て導入したよ!」という方でSNSやブログでこの記事を紹介していただいた場合、こちらでブログを紹介させていただきます!

ご連絡お待ちしております!

他にもカスタマイズやってます!

他にもカスタマイズをやってますので良かったらご覧ください!

関連 アイコン吹き出し付きボックスをHTMLとCSSで作る!

アイコン吹き出し付きボックスをHTMLとCSSで作る!レスポンシブ対応!
アイコン画像と吹き出しを入れたボックスのカスタマイズです。HTMLとCSSでレスポンシブ対応になっています。画像や吹き出しの内容はもちろん自由自在に変えられます。コピペで簡単にできるようになっているのでぜひ使ってください。

関連 Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. ここに掲載されてる比較表と別記事のタイムライン、目次を使わせていただきました。ありがとうございます。

    https://enrichoneslife.com/peasyuse/

  2. 初めまして、こんにちわ。こちらのサイトのカスタマイズが素敵すぎて、良く拝見させて頂いております!
    こちらの、CSSを使おうと思い入れてみたら下記のようなエラーが出てしまいました。

    アドバイス頂けましたら幸いです。因みにsangoを利用しています。

    Expected
    static relative absolute fixed but found wekit-sticky

    • >NORIKOさん

      ありがとうございます!
      CSSの何行目にエラー出ていますか?

      CSSは反映されないでしょうか。

      • ぽんひろ様

        ご返信ありがとうございます。

        88、89行目の下記内容で黄色いビックリマークが出て保存ができなくなってしまいます。

        position: -webkit-sticky;
        position: sticky;

        ※このようなエラーが出てきてしまいました。

        https://d.kuku.lu/9b435cfb68

        他にも、CSSコードを記載しているので合わせてエラーなどが出ているのでしょうか?
        あまり知識がなく、質問内容等稚拙でしたらスミマセン…m(__)m

        因みに、サイトは下記になります。

        http://noritamante.com/

ページトップへ