「Dawn」テーマの商品管理説明欄でのHTMLサイズ表について

[ff_dog]

はじめまして、ff_dogと申します。

現在、shopifyで「テーマ」Dawnにて店舗を作成してます。

初歩的なご質問で申し訳ないのですが、タイトルの通り、商品管理→商品説明欄にてサイズ表を作りたいのですが

PC、スマホ画面共に大きさの制限を受け表がタイトになってしまい、タイトルに入力した文字が改行されてしまい見た目が悪くなってしまいます。希望としましては表が画面外にはみ出してもよいので、文字を横に並べ、はみ出した部分はスクロールバーにて見れるような表示の仕方がいいです。

スクロールバーをHTMLに組み込んでみてもうまく反映されません。

どなたかご教授頂けますと幸いです。下記弊社が組み込もうとしましたHTMLになります。

どうぞ宜しくお願い致します。

<div class="table-scroll">
<table id="table01">
<tbody>
<tr>
<th>サイズ</th>
<th>首回り(cm)</th>
<th>胸囲(cm)</th>
<th>背中着丈(cm)</th>
<th>お腹着丈(cm)</th>
<th>体重目安(kg)</th>
</tr>
<tr>
<td>S</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>M</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>L</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

@media (max-width: 640px) {
.table-scroll {
overflow-x: scroll;
}
}

[Hori_Koh]

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>

【補足説明】

• <div>でスクロールするには"width"の指定が必要です。
• <th><td>内の文章を改行禁止にするには"white-space: nowrap;"の指定が必要です。
• htmlコード内のcss定義は<style>タグで囲む必要があります。

[十二十家具]

初めまして。十二十家具と申します。

こちらの情報を参考に商品詳細ページにて表を入れてみました。

PCでは問題なく表示されるのですが、iphoneだと文字が大きくなってしまい、右端の枠線も見切れてしまいます。

<padding>と<font-size>を追記しても改善されません。

何か方法分かりますでしょうか。

↓PCでの表示

↓iphoneでの表示

記入しているコードは以下の通りです。

<style type="text/css">
<!--
.table-scroll {
overflow-x: scroll;
white-space: nowrap;
margin: 5px;
padding: 5px;
}
table th td{
font-size:14px;
}
-->
</style>
<div class="table-scroll">
<table>
<tbody>
<tr>
<th>Size</th>
<td>W510 D540 H760/SH420㎜<br>座面高（SH)：400～460㎜まで10㎜単位でオーダー可能です。<br>※標準420㎜（テーブル高さ700㎜として）<br>※高さオーダーご希望の方は、カートページにて希望サイズをご入力ください。</td>
</tr>
<tr>
<th>Materiral</th>
<td>木部：ウォールナット無垢材（ウレタン塗装）<br>張地：布<br>クッション材：高密度ウレタンフォーム、ダイメトロール、合板</td>
</tr>
<tr>
<th>Detail</th>
<td>受注生産：納期（約1.5か月～）<br>カバーリング可<br>スタッキング可</td>
</tr>
<!-- 途中省略します -->
</tbody>
</table>
</div>

何か解決策あればぜひ教えていただきたいです。