項目選択肢別在庫用の幅指定について

Question

項目選択肢別在庫用の幅が狭いので、納期情報の文字が詰まってしまい見づらいので、横幅、縦幅を指定することはできますか？
（選択項目が多いものは幅が狭くなってしまいます。）
分かりづらい説明になってしまいましたが、よろしくお願いします。

Answer

ECマスターズの田中です。

項目選択肢別在庫の幅については既に、
ヘッダー内のCSSにある、下記の記述で規則が作られております。

td.inventory{word-wrap:break-word;width:150px;}

横幅を変更する場合は上記規則の「150」の数字を、増減させてください。
縦幅を指定する場合は、上記規則に「height:●●px;」を追加してください（●●は半角数字をご記載ください）。

Answer

ご指摘いただいた

td.inventory{word-wrap:break-word;width:150px;}

で指定しても、項目数の多い商品は幅が狭いままです。
商品によって幅がバラバラになってしまい、項目数が少ない商品は反映されているのですが、選択する項目が多い場合は反映されないのでしょうか？
何度もすみませんが、よろしくお願いします。

Answer

ECマスターズの田中です。

確認したところ、確かに項目数の多い商品だと
幅が狭いままになっておりました。
widthの指定を、min-widthに変更していただけますでしょうか。

width:150px;
であれば、
min-width:150px;
のように、頭に「min-」をつけていただければ結構です。

こうすると、ページ全体の横幅もひろがってしまいますので、
それを避ける工夫が必要となります。

すぐ下の行に、下記の規則を加えてください。

table[id^="normal_basket_"] > tbody > tr:nth-of-type(3) > td { max-width: 325px;  overflow: visible; }

項目選択肢別在庫のを囲むタグの横幅が325ピクセルであるとみなされ、
ページの拡がりを防ぐことができます。

まとめると、下記のようにご変更いただく形になります。

td.inventory{word-wrap:break-word;width:150px;}
↓
td.inventory{word-wrap:break-word;min-width:150px;}
table[id^="normal_basket_"] > tbody > tr:nth-of-type(3) > td { max-width: 325px;  overflow: visible; }

※widthの値を変更されている場合は、値はそのままで結構です。