FROM CACHE - jp_header

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

ff_dog
観光客
7 0 1

はじめまして、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;
}
}

1件の返信1

Hori_Koh
Shopify Partner
13 6 4

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>タグで囲む必要があります。