質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

1回答

1747閲覧

【レスポンシブ】テーブル部分のtdを下げると崩れる

roro_mochi

総合スコア48

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2018/12/25 04:18

独学で初めてのコンテンツ制作にとりかかり、ほぼほぼ完成してきました。

現在は、最終微調整としてレスポンシブ対応の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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/12/26 00:42

スクリーンショット等を提示されると良いかと思います。
roro_mochi

2018/12/27 08:04

お返事遅くなり申し訳ありません。 作り変えて作成を始めてしまい、スクリーンショットを提示することができませんでした。 せっかくご回答いただきましたのに、すみません。
yoshinavi

2018/12/27 09:36

大丈夫ですよ。こちらこそスミマセン。
roro_mochi

2018/12/27 09:43

いえいえ。とんでもないです。お気遣いをありがとうございます。 またよろしくお願いいたします。
guest

回答1

0

ベストアンサー

参考にしたサイトに

ポイントは19-23行目でtr、th、tdのdisplayをblockに指定しているくらいです。

とあるのでとりあえずそのまま適用してみればいいのでは?

CSS

1 tr, 2 th, 3 td { 4 display: block; 5 }

投稿2018/12/25 05:54

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

roro_mochi

2018/12/25 06:51

早々にありがとうございます。 試してみたところ、サムネイル部分が左に寄ってtd img写真は動かないままでした。 td img{ display: block; } も試してみましたがダメでした。 ちなみに拡大写真のtdは<td colspan="3" rowspan="4">に結合してしまっています。 その結合を単に下に回り込ませるというイメージでしたが、display: block;が効いていないようです。 せっかくご教授いただきましたのに申し訳ありません。
x_x

2018/12/25 07:01

display値を変更しているのでcolspanなどは効かないでしょう。 tableでのレイアウトは変更したほうがいいのでは?
roro_mochi

2018/12/25 07:22

そうでしたか。colspanはダメなのですね。 確かに、spanかliで作られているコンテンツを見つけました。 手戻りが痛いですが作り直しますm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問