スマホでテーブル横スライドさせる方法
-
いつもお世話になります。
初心者の質問で大変恐縮です。
【スマホでも横にスクロール】できるテーブルを作成したいです。
色々調べて以下のHTMLと追加CSSを記述していますがスマホで横にスライドできません…
ご教授いただけると幸いですm(_ _)m<div style="overflow-x: auto;">
<div style="overflow-x: auto;">
<table style="width: 111.884%;" border="1">
<tbody>
<tr>
<th style="width: 38.5874%;">レンタル品目</th>
<th style="width: 12.5682%;">料金(1日)</th>
<th style="width: 11.7796%;">料金(2日)</th>
<th style="width: 15.1228%;">延滞料金/日</th>
<th style="width: 33.2425%;">備考</th>
</tr>
<tr>
<td style="width: 38.5874%;">クーラーBOX 48L</td>
<td style="width: 12.5682%;">1,100円</td>
<td style="width: 11.7796%;">2,200円</td>
<td style="width: 15.1228%;">1,100円</td>
<td style="width: 33.2425%;">容量約48リットル</td>
</tr>
<tr>
<td style="width: 38.5874%;">リチウムイオンバッテリー</td>
<td style="width: 12.5682%;">1,100円</td>
<td style="width: 11.7796%;">2,200円</td>
<td style="width: 15.1228%;">1,100円</td>
<td style="width: 33.2425%;">釣り用電源</td>
</tr>
<tr>
<td style="width: 38.5874%;">ロッドキーパー</td>
<td style="width: 12.5682%;">1,100円</td>
<td style="width: 11.7796%;">2,200円</td>
<td style="width: 15.1228%;">1,100円</td>
<td style="width: 33.2425%;">ロッドの安全保管</td>
</tr>
<tr>
<td style="width: 38.5874%;">1つスッテスピニングセット</td>
<td style="width: 12.5682%;">2,200円</td>
<td style="width: 11.7796%;">4,400円</td>
<td style="width: 15.1228%;">2,200円</td>
<td style="width: 33.2425%;">イカ釣り用セット</td>
</tr>
<tr>
<td style="width: 38.5874%;">サーベルテンヤスピニングセット</td>
<td style="width: 12.5682%;">2,200円</td>
<td style="width: 11.7796%;">4,400円</td>
<td style="width: 15.1228%;">2,200円</td>
<td style="width: 33.2425%;">根魚釣り用セット</td>
</tr>
<tr>
<td style="width: 38.5874%;">手巻きカウンターセット</td>
<td style="width: 12.5682%;">2,200円</td>
<td style="width: 11.7796%;">4,400円</td>
<td style="width: 15.1228%;">2,200円</td>
<td style="width: 33.2425%;">深場釣り用</td>
</tr>
<tr>
<td style="width: 38.5874%;">オフショアキャスティングセット</td>
<td style="width: 12.5682%;">3,300円</td>
<td style="width: 11.7796%;">6,600円</td>
<td style="width: 15.1228%;">3,300円</td>
<td style="width: 33.2425%;">大型魚対応</td>
</tr>
<tr>
<td style="width: 38.5874%;">電動五目セット</td>
<td style="width: 12.5682%;">3,300円</td>
<td style="width: 11.7796%;">6,600円</td>
<td style="width: 15.1228%;">3,300円</td>
<td style="width: 33.2425%;">多種多様な魚種対応</td>
</tr>
</tbody>
</table>
</div>
</div>【追加CSS】
/* テーブルコンテナーのスタイリング */
div.overflow-x-auto {
overflow-x: auto;
}/* テーブルのスタイリング */
div.overflow-x-auto table {
width: 100%;
border-collapse: collapse;
}div.overflow-x-auto table,
div.overflow-x-auto th,
div.overflow-x-auto td {
border: 1px solid #ddd;
}div.overflow-x-auto th,
div.overflow-x-auto td {
text-align: left;
padding: 8px;
}/* テーブルヘッダーのスタイリング */
div.overflow-x-auto th {
background-color: #f2f2f2;
}
マニュアル確認済み
キャッシュクリア済み
プラグイン全停止済み
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL :
-
@yosuke さん
こんにちは！
コードの共有ありがとうございます。少しゴチャゴチャしてしまっているように見えるので、
もうちょっとシンプルな状態から試してみても良いかもしれません！こちらの参考記事の方法でも対応できるはずなので、
ひとまず試してみていただけますか...？？
https://tkhb7.com/jin-table-scroll/よろしくお願いいたします！
-
スマホでテーブル横スライドさせる方法で@tsu_が発言 :
返信ありがとうございますm(_ _)m こちらの<div class="scroll">
</div>
を記述してもスマホでうまく表示されません…
スマホで確認したらアドンセンスの画像もスクロールできません…
-
