WordPressテーマSANGOの質問

表の装飾を変更したい

アバター
goga

すみません、間違って他人のコメントの返信に書き込んでしまいました。
改めて書き直すことをお許しください。

先日SANGOを購入し、デザインをカスタマイズしているのですが、表の装飾の記事やSANGOの見出しのコードを参考にテーブルの装飾をしてみたところ、上記の方と同じようにtdの中の線が変化しませんでした。
私もキャッシュを消してみたり、カスタムCSS、子テーマのStyleCSS、どちらも試してみたのですが上手くいきません。
こちらがコードなのですが、アドバイスをいただけますと幸いです。


table.table01 {
	width:100%;
	border-collapse: collapse;
                border: solid 3px #EE817B;
                text-align: center;
}
table.table01 th, table.table01 td {
  border: dashed 1px #EE817B;
}
table.table01 thead th {
	background: -webkit-repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
                background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
	color:#928484;
	padding:10px 15px;
}
table.table01 tbody th {
	background: -webkit-repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
                background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px,#eaeaea 3px, #eaeaea 7px);
	color:#928484;
	padding:10px 15px;
	vertical-align:middle;
}
table.table01 tbody td {
                background: -webkit-repeating-linear-gradient(-45deg, #fff9fb, #fff9fb 3px,#fff2f5 3px, #fff2f5 7px);
                background: repeating-linear-gradient(-45deg, #fff9fb, #fff9fb 3px,#fff2f5 3px, #fff2f5 7px);
	color:#EE817B;
                padding:10px 15px;
	vertical-align:middle;
                   border-bottom: dashed 1px #EE817B;
}
table.table01 tbody tr:last-child {
	border-bottom:#EE817B solid 3px;
}
表の挿入方法とレスポンシブ対応させる方法
SANGOで表を挿入する方法:レスポンシブ対応させるには?
コメントへの回答
サルワカくん
サルワカくん
2018/03/16

なるほど。何が原因か確認したいので、可能であればテーブルが載っているページのURLを教えて頂けませんか?

アバター
goga
2018/03/18

ご返信ありがとうございます!
こちらの返信が遅くなりすみません。
ウェブサイト欄にURLを記入します。
お手数をおかけしますがご確認いただけますと幸いです。

サルワカくん
サルワカくん
2018/03/18

素敵なサイトですね!
以下の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;
 }
}

に置き換えると良いかと思います。

アバター
goga
2018/03/25

お世話になります。ご返信ありがとうございますm(__)m

はい、1列にするのは意図的にしております。横並びというわけではありません。
崩れてしまっている点は3点あり、
①スマホ表示時に、バックグラウンドが黒のセルと赤のセルの境目のラインが点線にならず、元のラインが出てしまっている点と、②一番下のセルの外枠に点線が重なっている点、③それに全体の枠の右側に元の表のラインが現れている箇所がある点です。

アバター
goga
2018/03/25

度々すみません。
アドバイス頂いた通りに書き直したのですが、PC表示では上手くいったにもかかわらず、スマホ表示では一部崩れてしまうんです。

アドバイスをいただいたあと、確かに一度は直ったはずなのですが、今日気付いたらスマホ表示だけ崩れてしまっていました。アドバイス後、テーブル以外にカスタマイズしたところが問題なのでしょうか?

どこが悪いのか自分なりに修正をしたのですが余計崩れてしまいまして(^_^;)
PC表示では問題ないということは、@media screenでスマホサイズを指定している部分のコードが何かおかしいということでしょうか?

アバター
goga
2018/03/21

アドバイスありがとうございましたm(__)m
表の中の線がきちんと点線で表示され、イメージしていた通りのデザインになりました!

サルワカくん
サルワカくん
2018/03/25

なるほど。以下の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;
}
サルワカくん
サルワカくん
2018/03/25

具体的にどの部分が崩れていると感じていますか?
前コメントを頂いたときからスマホ表示時は1列になるようなカスタマイズが施されていたので、
意図的にやっているものだと思っておりましたが…。
1列でなく、横並びに戻したいというイメージですか?

ちなみに、スマホ表示時に一部のセルに線が表示されてしまうことについては以下のCSSを追加することで消せるかと思います。

.entry-content th, .entry-content td {
 border-right: none;
}