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

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の値を変更されている場合は、値はそのままで結構です。

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

カテゴリーから探す