PC用商品説明文に入れるHTMLのテーブルがうまくいかなのです

Question

PC用商品説明文に入れるHTMLのテーブルがうまくいかなのですが
どうすればよいですか？
すみません。急ぎなので宜しくお願いいたします。



    商品詳細
    
        商品管理番号
        SM00010350
    
    
        生産地
        日本
    
    
        サイズ
        
            ■商品名：チョコブラウニー
                ■名称　：焼菓子
                ■原材料：卵（北海道産）、チョコレート（砂糖、カカオマス、ココアバター）（乳成分・大豆を含む）、砂糖、小麦粉、マーガリン、ショートニング（食用植物油脂、食用精製加工油脂）、生クリーム、ココアパウダー、くるみ、牛乳、バター、ラム酒／香料、乳化剤（大豆由来）、酸化防止剤（Ｖ.Ｅ）、アナトー色素
                ■内容量：1Kg
                ■賞味期限：製造日より常温60日（約20日～60日弱賞味期限が残ったものでのお届けとなります）■保存方法：直射日光および高温多湿を避け、常温で保存してください。
                ■販売者：株式会社天然生活
                〒141-0032　東京都品川区大崎3-6-4　トキワビル7F
            ※開封後は、賞味期限に関わらずお早めにお召し上がりください。※本品製造工場ではそば、落花生を含む製品を製造しています。
            ■栄養成分表示（100g当たり）
              エネルギー　　486kcal
              たんぱく質　　8.1g
              脂質　　　　　30.1g
              炭水化物　　　45.6g
              食塩相当量　　0.25g
              ※推定値
        



table {
font-size:12px;
background: #EFEFEF;
}
caption {
color: #fff;
background-color: #FE9A01;
line-height: 20px;
}
td {
padding: 4px 8px;
border-bottom: 1px dotted #C8C8C8;
}
.title {
font-size: 12px;
border-right: 1px dotted #C8C8C8;
}
tr:nth-child(3) th{
border-bottom: 0;
}

Answer

ECマスターズの田中です。

実際に設置された様子が確認できないため
正確なご案内ができていない可能性がございますが、

ページ全体の背景色などが変わってしまう、
ということでしたら、
スタイルシートの記載方法が原因です。

規則の対象として
table
td
のようにタグ名だけを指定すると、
ページ内の他のタグにも同じ見た目が適用されてしまいます。

たとえば、


を


のように変更して、各規則を

table → .itemdetail
caption → .itemdetail caption
td → .itemdetail td
.title → .itemdetail .title
tr:nth-child(3) th → .itemdetail tr:nth-child(3) th

のようにご変更いただき、
スタイルシートの対象を「class="itemdetail"」の内側に限定することで、
該当箇所の見た目だけをご変更いただくことができます。