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

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

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

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

比較表第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はどこに入力すればいいのかという質問をよくされます。

◎ Gutenberg

グーテンベルクの場合はカスタムHTMLで貼り付けてください。

◎ 従来のエディター

テキストエディタ

クラシックエディターの場合はテキストエディターに貼り付けてください、

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

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

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

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

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

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

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

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

紹介したにも関わらず反映されてないという方は大変申し訳ないのですがご連絡ください！

コメント

  1. 名前:せつやる管理人なお :投稿日：2019/10/19(土) 15:52:51 ID：U3MDE1NjU

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

    https://enrichoneslife.com/peasyuse/

    返信
  2. 名前:NORIKO :投稿日：2019/11/19(火) 22:37:30 ID：k2OTIyMzk

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

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

    Expected
    static relative absolute fixed but found wekit-sticky

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2019/11/20(水) 15:23:13 ID：AzNjkzODI

      ＞NORIKOさん

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

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

      返信
      • 名前:NORIKO :投稿日：2019/11/22(金) 23:47:58 ID：A2MzI5MzY

        ぽんひろ様

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

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

        position: -webkit-sticky;
        position: sticky;

        ※このようなエラーが出てきてしまいました。
        ↓
        https://d.kuku.lu/9b435cfb68

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

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

        http://noritamante.com/

        返信
  3. 名前:りえ :投稿日：2019/12/16(月) 00:25:24 ID：U1ODQ4NDY

    お世話になっております。

    比較表を導入したのですが、スマホで見ると行間がびっちり詰まって余白がなくなってしまいます。

    コードをどう変更したら良いでしょうか？

    https://rietaro.com/paul-saiyasune

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2019/12/19(木) 15:23:45 ID：U5MDY4ODg

      ＞りえさん

      コメントありがとうございます。
      こちらで確認したところ行間は詰まってないように見えます。
      環境を教えていただいてもよろしいでしょうか？

      返信
  4. 名前:匿名 :投稿日：2020/05/17(日) 07:38:43 ID：cyODYyOTI

    色々なデザインコード使わせて頂きました。もし僕のブログでよければ紹介していただければと思います。ボックスナビや棒グラフも導入予定です！

    素敵なサイトありがとうございます！

    https://vanloop.jp/battery/powerarq2-hikaku/

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/06/12(金) 16:44:30 ID：M2NjI0NjQ

      ありがとうございます！
      ブログやSNSでのシェアを条件とさせていただいております！

      返信
  5. 名前:カジェット :投稿日：2020/09/11(金) 07:50:47 ID：UwNDA3ODU

    いつも利用しています！

    最近SWELLを導入したので、「Useful Blocks」にこちらのテーブルデザインの反映を心よりおまちしております！

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/10/05(月) 14:44:10 ID：U3NzY2NzU

      ＞カジェットさん

      ありがとうございます！！！

      返信
  6. 名前:Atsushi :投稿日：2020/11/21(土) 14:11:14 ID：E0MDU4MTQ

    初めまして
    Atsushiと申します。
    携帯で見やすい表のカスタマイズと縦軸のみの表を参考にさせて頂きましたが色が出なかったり惜しい状態で終わってしまいます。
    以下のURLを確認頂けますか？

    上から
    ・ピンク
    ・グリーン
    ・オレンジ
    ・画像付き表
    ・縦軸のみの表

    になります。
    宜しくお願い致します。

    https://perokin.com/blog/saite/

    返信
    • 名前:Atsushi :投稿日：2020/11/28(土) 01:35:38 ID：g1MDM5MDU

      何度もすみません。
      携帯特化の表、色が出ました！素敵な表ありがとうございました^_^

      なぜか若干幅が広くてスクロールしないといけないのですが何故でしょうか汗

      返信

ページトップへ