独学で初めてのコンテンツ制作にとりかかり、ほぼほぼ完成してきました。
現在は、最終微調整としてレスポンシブ対応のcssを実装しているのですが、
テーブルの回り込みがうまく行きません。
ご教授のほどよろしくお願いいたします。
現状
テーブル(td部分)にはJavaScripがあります。
拡大写真の下にサムネイルが3つありサムネイルをクリックすると、
拡大写真が入れ替わる仕組みをJSで実装。
問題点
徐々に画面を小さくすると、サムネイル部分が崩れてしまう。
レスポンシブにならないため、横にスクロールしなければならない
やりたいこと(画面イメージ)
th 住所
td 詳細住所
th 電話番号
td 00-000-0000
th 時間
td ●~●字
th 価格
td ●円
td img写真
td サムネイル tdサムネイル tdサムネイル
参考にしたサイト
https://www.unionnet.jp/blog/responsive-table-css/
http://munouya.com/website/responsive-table.html
その他
メディアクエリのブレイクポイントは、768pxで切り替わるように設定しています。
cssの冒頭でデフォルト解除(マージン解除など)を実行してみましたが、やはりうまく行きませんでした。
html
1 2 <div class="main"> 3 <!--ここからお店紹介--> 4 <section class="info"> 5 <div class="shop-info"> 6 <h3 id="target01">タイトル(店名)</h3> 7 <table> 8 <tr> 9 <th>住所</th> 10 <td><a href="url" target="_blank">大阪市西区江戸堀1-8-23</a></td> 11 <td colspan="3" rowspan="4"><img src="../img/●●.png" alt="●●" name="pc01" id="table-row"></td> 12 </tr> 13 14 <tr> 15 <th>電話番号</th> 16 <td>●●</td> 17 </tr> 18 19 <tr> 20 <th>時間</th> 21 <td>●●</td> 22 </tr> 23 24 <tr> 25 <th>価格</th> 26 <td>●●円</td> 27 </tr> 28 29 <tr> 30 <th>コメント</th> 31 <td>●●</td> 32 <td> 33 <a href="javascript:document.pc01.src = '../img/●●.png'; void(0);"> 34 <img src="../img/●●.png" alt="●●" id="thumb"></a></td> 35 36 <td> 37 <a href="javascript:document.pc01.src = '../●●.png'; void(0);"> 38 <img src="../img/●●.png" alt="●●" id="thumb"></a><br></td> 39 40 <td> 41 <a href="javascript:document.pc01.src = '../img/●●.png'; void(0);"> 42 <img src="../img/●●.png" alt="●●" id="thumb"></a><br></td> 43 </tr> 44 </table> 45 </div> 46 </section> 47 </div> 48
css
1 2 @media screen and (max-width: 768px) { 3 .main { 4 float: none; 5 width: auto; 6 margin: 0 5%; 7 } 8 9 table { 10 width: 80%; 11 } 12 13 td th{ 14 display: block; 15 width: 100%; 16 } 17 } 18
回答1件
あなたの回答
tips
プレビュー