項目選択肢在庫表のデザインについて

Question

お世話になっております。
項目選択肢在庫表の罫線が無くてとても見ずらいので改善したいのです。
前任者が作成したので原因が分かりません。
過去に同じご質問されていた方のものを拝見しましたが解決策が分かりませんでした。
お手数をお掛け致しますが、ご教授いただきたいです。

Answer

ECマスターズの田中です。

ジェイさんのショップの商品ページを確認したところ、
ヘッダー・フッター・レフトナビ、
レフトナビゲーションの中に記載されている
〜内の規則により、罫線が削除されておりました。

同じ〜内に、
下記規則を追記していただくことで、
本来の罫線が表示されるようになります。

/* 項目選択肢別在庫 */
td.floating-cart-sku-table table {
    border-collapse: separate;
    border-spacing: 1;
}

Answer

ECマスターズ　田中様

早速のご対応ありがとうございます。
規則の追記することで枠の罫線が表示されました。

もう一つ質問ですが、見やすくするために枠の幅を少し広くしたいのですが可能なのでしょうか。
お手数をお掛け致しますが、よろしくお願いいたします。

Answer

ECマスターズの田中です。

> もう一つ質問ですが、見やすくするために枠の幅を少し広くしたいのですが可能なのでしょうか。

先の規則に加えて、
たとえば、セル（各項目選択肢別在庫１つ１つの枠）の幅を広くするなら

td.inventory_choice_name {
    width: 150px;
}

のように、

td.inventory_choice_name:first-child {
    width: 3em;
}

のようにご指定いただければ結構です。
（両方ともご指定いただいても結構です）

なお、表の横幅を広げすぎると、ページ全体のレイアウトに影響し、
ヘッダーの位置がずれる、などの崩れが発生する場合がございますことを
予めお含みおき願います。

Answer

ECマスターズ　田中様

ご対応ありがとうございます。
幅を調整しながら色々試してみます。

ありがとうございました。