なるほど。何が原因か確認したいので、可能であればテーブルが載っているページのURLを教えて頂けませんか?
ご返信ありがとうございます!
こちらの返信が遅くなりすみません。
ウェブサイト欄にURLを記入します。
お手数をおかけしますがご確認いただけますと幸いです。
素敵なサイトですね!
以下のCSSを追加してみると良いかと思います。
.entry-content tr:not(:last-child) {
border-bottom: none;
}
それから、スマホ表示だと線がダブってしまっているようなので、
table.table01 th, table.table01 td {
border: dashed 1px #EE817B;
}
の部分は
@media screen and (min-width: 640px) {
table.table01 th, table.table01 td {
border: dashed 1px #EE817B;
}
}
に置き換えると良いかと思います。
お世話になります。ご返信ありがとうございますm(__)m
はい、1列にするのは意図的にしております。横並びというわけではありません。
崩れてしまっている点は3点あり、
①スマホ表示時に、バックグラウンドが黒のセルと赤のセルの境目のラインが点線にならず、元のラインが出てしまっている点と、②一番下のセルの外枠に点線が重なっている点、③それに全体の枠の右側に元の表のラインが現れている箇所がある点です。
度々すみません。
アドバイス頂いた通りに書き直したのですが、PC表示では上手くいったにもかかわらず、スマホ表示では一部崩れてしまうんです。
アドバイスをいただいたあと、確かに一度は直ったはずなのですが、今日気付いたらスマホ表示だけ崩れてしまっていました。アドバイス後、テーブル以外にカスタマイズしたところが問題なのでしょうか?
どこが悪いのか自分なりに修正をしたのですが余計崩れてしまいまして(^_^;)
PC表示では問題ないということは、@media screenでスマホサイズを指定している部分のコードが何かおかしいということでしょうか?
アドバイスありがとうございましたm(__)m
表の中の線がきちんと点線で表示され、イメージしていた通りのデザインになりました!
なるほど。以下のcssを追加してみてはどうでしょうか。
.entry-content th, .entry-content td {
border-right: none;
}
.entry-content th {
border-bottom: dashed 1px #ee807a;
}
.entry-content tr:last-of-type td:last-of-type {
border-bottom: none;
}
具体的にどの部分が崩れていると感じていますか?
前コメントを頂いたときからスマホ表示時は1列になるようなカスタマイズが施されていたので、
意図的にやっているものだと思っておりましたが…。
1列でなく、横並びに戻したいというイメージですか?
ちなみに、スマホ表示時に一部のセルに線が表示されてしまうことについては以下のCSSを追加することで消せるかと思います。
.entry-content th, .entry-content td {
border-right: none;
}
WordPressテーマSANGOの質問
表の装飾を変更したい
すみません、間違って他人のコメントの返信に書き込んでしまいました。
改めて書き直すことをお許しください。
先日SANGOを購入し、デザインをカスタマイズしているのですが、表の装飾の記事やSANGOの見出しのコードを参考にテーブルの装飾をしてみたところ、上記の方と同じようにtdの中の線が変化しませんでした。
私もキャッシュを消してみたり、カスタムCSS、子テーマのStyleCSS、どちらも試してみたのですが上手くいきません。
こちらがコードなのですが、アドバイスをいただけますと幸いです。