商品説明欄にHTMLエディタ機能「リッチテキスト」モードで表を入れましたが、罫線が表示されません。どうしたらいいですか。 – makeshop よくある質問

「リッチテキスト」モードで都度罫線の色などを指定することができますが、あらかじめCSSを追記しておくことにより、都度罫線の色を指定しなくてもページへ表示させることができます。

■クリエイターモード

・テンプレート【Complete】の場合

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

CSS欄の最後尾などに以下を追記してください。

記述例）

.item-description dd figure.table th,
.item-description dd figure.table td,
.item-description.border-top figure.table th,
.item-description.border-top figure.table td{
  border:solid 1px #ccc; /*グレーの枠線の指定*/
  padding: 4px; /*セルの内側に上下左右に4px余白をあける*/
}
.item-description.border-top figure.table th{
  background: #eee; /*見出しの背景をグレーにする指定*/
}

■旧デザインモード（ベーシックモード）

・PC　テンプレート【プレーン】ホワイトの場合

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理

エディタ内の最後尾などに以下を追記してください。

記述例）

.detailTxt figure.table th,
.detailTxt figure.table td,
.detailExtTxt figure.table th,
.detailExtTxt figure.table td{
  border:solid 1px #ccc; /*グレーの枠線の指定*/
  padding: 4px; /*セルの内側に上下左右に4px余白をあける*/
}

・スマホ　テンプレート【Primary】の場合

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定 / 商品詳細ページ編集

CSS編集欄の最後尾などに以下を追記してください。

記述例）

.content figure.table table,
.content figure.table table th,
.content figure.table table td{
  border:solid 1px #ccc; /*グレーの枠線の指定*/
  padding: 4px; /*セルの内側に上下左右に4px余白をあける*/
}

適用中のテンプレートによってclass名は異なります。

該当する箇所のclassを確認して、class名を適宜変更してください。

関連記事