問題の概要:
Shopifyの「Dawn」テーマで商品説明欄にHTMLでサイズ表を作成する際、PC・スマホ画面で表が狭くなり、文字が改行されて見づらくなる問題が報告されています。希望は表が画面外にはみ出してもスクロールバーで閲覧できる表示方法です。
提案された解決策:
2番目の投稿者が以下のHTMLコードを提案:
.table-scrollにwidth: 100%とoverflow-x: scrollを指定thとtdにwhite-space: nowrapを設定して改行を防止<style>タグ内で定義する必要がある追加の問題:
3番目の投稿者が同様の方法を試したところ、PCでは正常に表示されるものの、iPhoneで文字が大きくなり右端の枠線が見切れる問題が発生。paddingやfont-sizeを追記しても改善されず、解決策を求めています。
現状:
iPhoneでの表示問題は未解決のまま、追加の解決策待ちの状態です。
はじめまして、ff_dogと申します。
現在、shopifyで「テーマ」Dawnにて店舗を作成してます。
初歩的なご質問で申し訳ないのですが、タイトルの通り、商品管理→商品説明欄にてサイズ表を作りたいのですが
PC、スマホ画面共に大きさの制限を受け表がタイトになってしまい、タイトルに入力した文字が改行されてしまい見た目が悪くなってしまいます。希望としましては表が画面外にはみ出してもよいので、文字を横に並べ、はみ出した部分はスクロールバーにて見れるような表示の仕方がいいです。
スクロールバーをHTMLに組み込んでみてもうまく反映されません。
どなたかご教授頂けますと幸いです。下記弊社が組み込もうとしましたHTMLになります。
どうぞ宜しくお願い致します。
| サイズ | 首回り(cm) | 胸囲(cm) | 背中着丈(cm) | お腹着丈(cm) | 体重目安(kg) |
|---|---|---|---|---|---|
| S | |||||
| M | |||||
| L |
@media (max-width: 640px) {
.table-scroll {
overflow-x: scroll;
}
}
htmlコードを下記のようにすることで、ご要望の表示になると思います。
<style type="text/css">
<!--
.table-scroll {
width: 100%;
overflow-x: scroll;
}
.table-scroll th td {
white-space: nowrap;
}
-->
</style>
<div class="table-scroll">
<table>
<tbody>
<tr>
<th>サイズ</th>
<th>首回り(cm)</th>
<th>胸囲(cm)</th>
<th>背中着丈(cm)</th>
<th>お腹着丈(cm)</th>
<th>体重目安(kg)</th>
</tr>
<!-- 途中省略します -->
</table>
【補足説明】
初めまして。十二十家具と申します。
こちらの情報を参考に商品詳細ページにて表を入れてみました。
PCでは問題なく表示されるのですが、iphoneだと文字が大きくなってしまい、右端の枠線も見切れてしまいます。
とを追記しても改善されません。
何か方法分かりますでしょうか。
↓PCでの表示
↓iphoneでの表示
記入しているコードは以下の通りです。
| Size | W510 D540 H760/SH420㎜ 座面高（SH)：400～460㎜まで10㎜単位でオーダー可能です。 ※標準420㎜（テーブル高さ700㎜として） ※高さオーダーご希望の方は、カートページにて希望サイズをご入力ください。 |
|---|---|
| Materiral | 木部：ウォールナット無垢材（ウレタン塗装） 張地：布 クッション材：高密度ウレタンフォーム、ダイメトロール、合板 |
| Detail | 受注生産：納期（約1.5か月～） カバーリング可 スタッキング可 |
何か解決策あればぜひ教えていただきたいです。
