賢威のスクロールするテーブルをカスタマイズ

※当サイトにはプロモーションが含まれています。

にゃのらいと

テーブルの表示は、パソコンで見た時は幅にあわせて、
スマホで見た時は必要に応じてスクロールさせたいにゃ

賢威のテーブルは、予め用意された<div class=”table-scroll”></div>で括って、widthを固定値にすることで、スマホで見た時にスクロールされるようになります。

ただ、固定値にしてしまうと、融通があまり効きません。

例えば、パソコンで見た時に幅一杯まで広がるように、width:780pxで調整すると、スマホで見るとちょっと横に長くなりすぎます。

賢威のテーブル（PC）

賢威のテーブル（SP）

※スクロールが少し長すぎる

その為、下記のようにしたいと思います。

パソコンで見た時は幅まで広がる（100%）
スマホで見た時は、最大600pxまでのテーブルにする

これを適用させれば、パソコンで見た場合は幅一杯までテーブルが広がり、スマホで見た時は下記のようになります。

賢威テーブル改良後（PC）

賢威テーブル改良後（SP）

賢威のスクロールテーブルをカスタマイズ

賢威のスクロールするテーブルをカスタマイズしてみました。

HTML

<div class="table-scroll">
<table style="table-responsive">
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table><!--標準のテーブル-->
</div><!--はみ出した分横にスクロールするスタイル-->

CSS

.table-responsive {
width: 100%;
}

/* スマホ用スタイル */
@media (max-width: 600px) {
.table-responsive {
min-width: 600px;
}
}

なお、賢威で予め用意されているコードとの変更点は下記の箇所です。

賢威のデフォルト

<table style="width: 500px;">

の箇所を、

<table style="table-responsive">

に置き換えています。

なお、テーブルの幅がいっぱいに広がらなくていいような狭いテーブルの場合は、賢威のデフォルト設定通り、<table style=”width: 500px;”>のように、<table style=”table-responsive”>に置き換えなければOKです。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザマナ発行年月：2022年03月24日予約締切日：2022年01月26日ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田涼子西原礼奈ソシムエイチティーエムエルサイトヲワードプレスニスルホンクボタリョウコニシハラアヤナ発行年月：2023年08月29日予約締切日：2023年06月06日ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ）「ワクワクするモノ・時間・場所を生み出す」をテ

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名由美はつみ技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバンクワナユミハツミ発行年月：2023年09月28日予約締切日：2023年06月02日ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

たった1日で基本が身に付く！　WordPress 超入門［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木恵リブロワークス技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハンササキメグミリブロワークス発行年月：2022年04月14日予約締切日：2022年01月05日ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [

3,278円(税込)【送料込】

楽天ブックス

小川欣一穂苅智哉ソシムビジネスサイトヲツクッテマナブワードプレスノキョウカショバージョンロクテンエックスタイオウバンオガワヨシカズホカリトモヤ発行年月：2023年05月01日予約締切日：2023年01月12日ページ数：436p サイズ：単行本 ISBN：9784802614030 1　開発環境を構築しよう／2　テ